7.4 Fonts

Using system fonts

In 2022, the average size of a web font was 138 kB, or 6% of the overall page size. Which is more than double the average weight of fonts in 2010 (HTTP Archive). Using fonts that are pre-installed on the user terminal removes the need to download additional fonts, thus reducing the bandwidth use and speeding up the loading process.

There are dozens of pre-installed fonts on terminals. Here is a small selection of the most widespread standard fonts:

• Sans serif: Arial, Candara, Euphemia, Impact, Lucida Sans, Tahoma, Trebuchet MS, Verdana
• Casual: Comic Sans MS
• Serif: Georgia, Palatino, Times New Roman
• Serif mono: Courier New, Consolas

All of the above fonts are included on computers running on Mac OS X 10.7 (released in 2011) and Windows 7 (released in 2009) and more (sources for Mac OS and Windows). Please note: as of October 2020, more than 20% of people still used Windows 7 as their operating system (source: Net market share).

As much as possible, it is best to avoid using custom fonts, or if you do, to limit to one or two on your website, for titles for instance.

Using the WOFF2 format

Some font formats like WOFF (Web Open Font Format, the most widespread) and WOFF2 (the most compressed) have optimized sizes that will bring down the weight of fonts downloaded by users. Some older versions of web browsers do not support WOFF2.

Following best practices in accessibility

Standard sans serif fonts are also recommended for the purpose of accessibility (as opposed to cursive, handwritten, or ornamental fonts, which can be difficult to read for people with disabilities).

Avoid very dense fonts, long portions of text in all-caps, underlining and italics, as well as animated or scrolling text.