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.
When it comes to making a website the new rules for website typography may not be what you think.
7 web typography rules
01. 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 web design 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.
So, play around with other typography styles. Mix and match serifs, sans serifs, and even handwritten fonts or experimental typefaces.
There are a lot of myths as well about what kinds of fonts to use, regardless of style, when deciding how to design a website.
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 design 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.
02. 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.
Not only does this tool show a nice conversion between pixels and ems, but it also applies several different scales, allowing you to change the preview font selection and base font size or create a custom scale altogether.
The good thing about using percentages or ems is that these units of measure can provide an accessibility advantage as well.
Since text sizes are based on user preferences, users that use bigger text on screen (or smaller) will have the same user experience as someone who sticks to the default settings. Seeing as resizing works on mathematical calculations, not fixed sizes, it proportionally accounts for almost any user/browser setting in the same way.
In other words, using a fixed measurement prevents the necessary adjustments from happening at the browser level. Plenty of users change their default setting or use zoom in-browser, and you definitely want your website to adapt accordingly.
Good website typography is usable, readable and accessible.
03. Readability and accessibility
Good website typography is usable, readable and accessible. To achieve this, employ visual hierarchy and CSS hierarchy.
To ensure readability, connect your typographic scale to CSS custom properties. Each level of type should be assigned a job, such as body, header, subheader, quotes, and more. Use your scale of font sizes and assign them to the appropriate CSS functions.
This might sound elementary, but ensuring the visual and technical aspects of typography match creates consistency for reading. This consistency, in turn, makes content easier to scan and digest because of visual patterns.
So, by linking visual hierarchy and CSS hierarchy, you have better chances of creating content that humans (as well as search engines) can read with ease.
Another important aspect to take into account in technical typography is choosing some of the best fonts for websites that are easy for readers of all abilities to understand. There are a few guidelines to consider for the primary font to ensure that you are designing accessible type elements:
Use a base font that’s readable without assistance. This is usually 16 px or larger depending on the typeface.
Select a typeface with a large, consistent x-height.
Use headings and subheadings to establish hierarchy.
Measure using a relative scale.
Avoid images of text, because they can look grainy, can’t be read by search engines, and don't scale by device size.
Check type styles against Web Content Accessibility Guidelines (WCAG 2.1).
04. Usability
When it comes to typography, usability isn’t always the first thing that comes to mind. Usability is more commonly associated with design elements such as buttons, links, or images.
But typography has to be usable, too.
The number one thing you can do to ensure a usable type design is to pick–and stick to–a limited typography palette. A website should use one to three typeface families. For many websites, two typefaces is plenty.
Select typefaces with distinct visual identities that are different from one another. While you want them to match–look for similar letter shapes or x-heights–the font differences should be easy to identify. You can choose fonts from different categories of typefaces (such as a serif and sans serif) or use weight, color, or size to create contrast. Dramatic font changes can make content easier to scan and digest.
While you might think they are boring, popular and well-known typefaces can be the easiest for many people to read and absorb because their eyes are already comfortable with them. (It’s not a mistake to use Helvetica; there’s a reason it is so popular.)
Colors also have an impact on usability. Some tend not to work for text. Avoid them, or use them sparingly:
Light blue: People associate light blue text with a link.
Red or green: These colors can present readability concerns for people with color blindness.
Any color similar to the background: Gray on gray, for example, can be difficult to read.
Multiple font colors: Too much decoration gets messy and hard to read in a hurry; if you are going to use a colored type element, stick to just one.
The best web typographers also understand that using text elements as links can be a challenge on many devices. For users, tapping an inline text link can be a challenge on smaller screens and gets even more challenging with multiple links in the same section or paragraph.
Whenever possible, avoid inline text links, opting for buttons instead. This provides a visual cue that a text element is a link and a usable function that helps eliminate user error.
05. Space and contrast
If you weren’t already thinking about space and contrast, these are as much a part of good web typography as anything. Space and contract contribute to readability, accessibility, and visually stunning text.
When it comes to space, the most important text spacing may be the amount of space between lines of text. Too much space and paragraphs or multi-deck headers don’t look like they go together, which can cause confusion and hinder reading. Too little space can cause strain on the eyes, making users turn away from blocks of copy because they are uncomfortable to read.
Keep the following rules in mind:
For most fonts, a good starting point for line height is 1.5 times the font size.
For smaller, lighter, or narrow fonts, adding more space can increase readability.
For oversized typefaces, think 80 px or higher, a little less space might be ideal.
For fonts with long descenders, add line spacing.
For all caps, text without descenders, or with short descenders, decrease line spacing.
Increase the line height between different type hierarchies, such as between a header and body copy.
Contrast is any text element that differentiates it from another design element.
Good internet typography has plenty of contrast, so that the text is easy to see and read. This means that it:
Is a different color than the background.
Stands apart from other text elements.
Has adequate space separating it from images, videos, or other design elements.
Is appropriately sized to surrounding elements.
06. Line lengths matter
Just as important as font selection and size, is creating text blocks that are designed for reading. The heftier the text elements, the more important this becomes.
Consider these basic guidelines as a starting point to help determine sizing for the body text container elements:
A comfortable line length on desktop devices is 45 to 80 characters wide (including spaces and punctuation).
The ideal number is 66 characters per line for body text.
Smaller screens should err on the side of shorter line lengths.
One more line length consideration? Avoid hyphenation. It works in books and printed materials, but can make a mess online. If text block spacing is awkward without hyphenation, it is a sign that your lines are too long or too short for the font you have selected.
07. Break up text
When it comes to reading on the web, text shouldn’t be designed to look like a novel.
Good website typography incorporates font selection, style, and hierarchy, as well as how text blocks are broken up to facilitate reading.
Use paragraphs, lists, block quotes, and varying elements to enable users to scan text. The easier it is for users to scan your web page and find information that is of interest to them, the more likely they are to stick around on your page. From an online marketing perspective, they’re also more likely to convert if they easily understand the page goal.
Experiment with different text block variations and formats to determine what type of reading your audience prefers, and design more text elements in that format. Remember to create appropriate hierarchies for each different style, such as CSS specifications for bullet or numbered lists, quotes, FAQs, or other text elements.