There was a time when type on the web was “supposed” to use a sans serif. Then the awareness of web fonts emerged, to ensure your design loaded quickly and efficiently. But the rules of internet typography have changed since the early days.
Now, website typefaces are anything but boring, and there’s no reason to stick to a safe sans serif unless it serves your purpose.
The new rules for website typography may not be what you think.
Types of fonts to use in web typography
The first rule of modern internet typography is that there’s no right and wrong style of typeface.
Yes, there was a time when it was recommended to use sans serif choices for website and app design. There were a few reasons for this, mostly rooted in readability in relation to screen resolution.
Early screens didn’t have the sharp, high-quality displays that are standard for pretty much every desktop, tablet, and mobile device. Because of the simplicity of sans serif fonts, they were more legible on low-resolution devices and easier to render accurately. That’s not really a concern for most designers anymore.
There are a lot of myths as well about what kinds of fonts to use, regardless of style.
The most common categories of fonts include:
Web fonts: These types of font are automatically downloaded by the browser as soon as someone visits the web page., This means that any (and every) browser renders them in the exact same way. Web fonts are a CSS feature and have wide-ranging compatibility. The most common web font providers are Google Fonts and Adobe Fonts (formerly Typekit). Web fonts are important if you want things to look a specific way for all users all the time on any device or browser.
System fonts: These typefaces use the fonts installed on your computer to render typography on websites. It’s still a fairly widespread practice, but unlike web fonts, the resulting design will end up looking different for different users and devices.
Variable fonts: The newest method for website font delivery is through variable fonts, an OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This makes it possible to animate fonts, making them move fluidly between the various widths, weights and styles.
There’s no right or wrong type of font to use here. They each have pros and cons that you should align with your website needs and goals.
That being said, a lot of developers are incorporating variable fonts into redesigns and builds. It can really provide nice flexibility that allows you to use the typefaces you want in an efficient way.
Font size and scale
Traditionally, we measured typography in fixed-height measurements, such as points, x-height, and pixels. Throw that out the window!
For internet fonts, you should use relative measurements to create a typography scale, so that everything maintains the same proportions regardless of size, browser, or device type.
Measure in ems, or rems, and percents to compose a better scale for typography.
Ems are your best bet if you think in pixels and have a hard time imagining any other way. Ems are based on the default font size in the viewer’s browser, and you can use proportions to scale font sizes up or down.
Generally, 1 em is 16 pixels, based on a fixed measurement. Since that is a common body text size, that’s a good place to start with scaling type. If you want the body text to be roughly 18 px, do a little math: divide the size you want in pixels by the parent font size to find the measurement in ems (for example 18/16=1.125 em).
Ems can be specified up to three decimal places for a fairly precise unit of measure.
Designing for font size and scale using percentages is a lot like using ems.
Start with a base font size. Typically, this is the body text since it is the most used across the design, making it a recommended starting point for a typographic scale.
Then type sizes for different text elements are generated using a percent value based on the default font size (for example, if the default is 16, 150%=24). After you have established a unit of measure, then apply the math to create a visual scale for the project.