Work in progress

Learn Layout

Typography

On the Web, vertical rhythm - the spacing and arrangement of text as the reader descends the page - is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained. Richard Rutter

In his article, Compose to a Vertical Rhythm, Richard captures the essence of getting typography right on the web. This section will introduce you to his method for thinking about vertical layouts and spacing on your websites, but using modern CSS. In addition, we will provide resources and tools for making sizing your typography easy in the future.

Leverage the following resources to make typography easier in CSS:

Flexbox

Single column or row


      .flex {
        align-items: center;
        display: flex;
        justify-content: center;
      }

Grid

Multiple columns and rows


      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        place-items: center;
      }

Want to learn more?

We recommend taking Kevin Powell's 21-Day Challenge: Conquering Responsive Layouts