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
- Types of font to use
- Font size and scale
- Readability and accessibility
- Usability
- Space and contrast
- Line lengths matter
- Break up text
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.
Therefore, experiment with various typographic styles. Mix and match serifs, sans serifs, and even handwritten fonts or experimental typefaces.
When deciding how to design a website, there are numerous myths regarding the appropriate fonts for each 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 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.
To create a better typography scale, measure in ems, rems, and percentages. 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.
Based on a fixed measurement, 1 em typically equals 16 pixels. 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.
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 use weight, color, or size to create contrast, or you can choose fonts from different categories of typefaces (like serif and sans serif). 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. Text’s readability, accessibility, and visual appeal are aided by space and contract. 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 in mind the following guidelines: For most fonts, a good starting point for line height is 1.5 times the font size.
