Responsive Typography

This section details text handling methods including scaling, zooming, and more.

Stepped Font Sizing

The stepped sizing method defines exact text sizing (whether absolute or relative) by breakpoint. This is what it would look like:

body {
    font-size: 16px;
}

@media screen and (min-width:768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width:1024px) {
    body {
        font-size: 19px;
    }
}

@media screen and (min-width:1280px) {
    body {
        font-size: 20px;
    }
}

There are pros and cons to this method. It's more explicit, verbose and prescriptive. Text size is defined between breakpoints, but nothing happens between breakpoints, unless you use relative sizing. Even then, "the steps" can be "felt" and snap. As such, this method is somewhat of a semi-responsive method.

Fluid Scaling Font Sizing

The fully responsive text sizing method is a single top-level setup with the text of all other elements sizing with 100% fluidity. This site is built using this method. Try resizing the browser window and inspect the css of any of the text elements (use the computed tab).

We use the calc() method to create a completely fluid top level font by using a base font, which is absolute and adding it with the viewport width, which is relative.

It's helpful to create css properties to make future maintenance and modification much easier.

:root {
    --site-base-font-size: 15px;
    --optimal-vw-text-fraction: 0.39vw;
}

body {
    font-size: calc(var(--site-base-font-size) + var(--optimal-vw-text-fraction));
}

Feel free to experiment with your base font size. However, these specific numbers do result in a fairly optimal text scaling in all browser viewport sizes.

The next step is to use em units for relative font sizing across the site. Each element at various levels of the DOM with em unit are relative to its parent. This provides a useful mechanism for maintaining a consistent visual hierarchy across the page. This makes the use of em units the perfect choice.

Here's how you'd utilize the fully fluid font sizing:

h1 {
    font-size: 1.75em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.45em;
}

h4 {
    font-size: 1.3em;
}

To see how the fluid text sizing works on this site, inspect the css of the headings using the computed tab. Drag the browser window narrower and wider, and note the font size changing.