Choose Legible Fonts and Sizes
Due to the visual and flexible nature of the internet, the presentation of the content can be just as important as the content itself. There are unlimited fonts available for use, and though they may be visually appealing, they can pose issues if they are difficult to read. Legible fonts are incredibly important for those with poor vision, aging vision, or for those with reading disabilities like dyslexia. They must also be paired with a good font size to ease reading, as well as be able to be viewed easily on multiple browsers, such as Chrome, Firefox, Safari, or Internet Explorer.
Use certain fonts designed for legibility on the screen (e.g., Georgia, Tahoma, Verdana, Helvetica, Arial, Calibri) and keep the number used to a minimum.
What are Generic Font Families?
Fonts are classified by their style into a particular typeface. CSS utilizes some of the most common typefaces, which encompass many fonts made for internet usage. Understanding these generic font families can make searching for a preferable font easier.
Use a small amount of legible fonts
It is best practice to choose 2-3 fonts that are legible on screen and keep to a theme to not confuse the reader. There is an unspoken rule in web design which states that Sans-serif fonts are best for screen usage, but this may be due to older computers that had issues processing Serif fonts. Fonts like Verdana, Trebuchet MS, and Georgia were made specifically for electronic media.
A few things to identify when choosing fonts:
- Letters should be easy to identify and each one should have a unique shape. An uppercase I and a lower case l are the best identifiers in a font.
- Font letters that are inherently thin can also be difficult to identify for those with sight issues and dyslexia.
- There should be some space between letters, which keeps them from looking squished and tight.
- Symbols such as &, @, $ should be marked up in a way that it is still close to its original form. Stylized symbols that only retain some of the original markup can be confusing to readers.
- The font itself should be able to scale to higher sizes without loss of resolution.
WebAIM has a more in-depth explanation with side by side comparison on their Accessible Fonts writeup.
Accessible sizes and styles
Unless declared in CSS, the default font size of normal paragraph text on a web browser 16 pixels (px). This is a different measurement than the points (pt) used in a writing application like Word. Though browsers have the built-in ability for users to enlarge text, it is always best to keep the default size larger and never go below the default 16px.
An alternative form of measurement is ems, which is preferred for its flexibility with mobile devices and recommended by the W3C for standard design. em sizes are calculated by the default browser with the following formula: desired pixel size / current font size = em. If no font size is declared in the body tag in CSS, the em is calculated by 16.
For example: If the desired font size of the first header is 50 px, the em size would be 3.125.
For easy organizational purposes, headers should always be larger than paragraph fonts, and headers should also be larger for higher levels versus the lower levels. should be larger than, which are larger than, and so on. Be sure to also maintain proper header hierarchy on a page.
Markup styles like bolding, italics, and underline are also able to be used on text. Though they may be aesthetically appealing, they can be hard to read on certain fonts and confusing to a user base.
- Bold fonts are good for identifying headers, identifying links, and marking up important parts of a block of text. However, too much bold usage can confuse a user.
- Italics can be good for marking up important parts of a block of text. However, certain fonts with italics can be difficult to read, so it is best to use this sparingly if at all.
- Underlines are synonymous with links on a page, so they should not be used for marking up important parts of a block of text.
Also, be sure to choose a proper color and color contrast with fonts and backgrounds. See the color contrast section for more information.
Avoid use images in place of text
When an image is used over text, a screen reader does not properly read the content unless it has a proper alt markup. The text also has the advantage of not losing its quality when a user utilizes a magnifying program to zoom into the text to make it larger. Logos and official markers are exempt from this rule, but should still have the proper markup for images.
How to properly add your font
One of the challenges of implementing fonts in CSS is that of working cross-browser. Firefox utilizes fonts differently than Chrome, and Internet Explorer reads different font files than Safari. Here are a few methods to properly ensure fonts work across all browsers.
Choose standard fonts
Like the font families, there are several fonts already built into web browsers. These can be applied to fonts without needing to upload to the server. W3schools lists these fonts with a visual example of each.
Adding fonts in CSS
To ensure that each browser is able to access the font, the browsers will require multiple copies of the font in different file types: .eot for Internet Explorer 9 and older; .ttf for Safari, Android and iOS; .svg for Legacy iOs; and .woff and .woff2 which will cover the majority of browsers today.
The @font-face rule in CSS is used to call fonts stored locally in a directory on the website. The following syntax is used to find a font and provide the best browser support for fonts.
Once the font-family is declared, it can be used in CSS and added to other tags and classes.
CSS-Tricks explains more in-depth on the use of @font-face for browser support in their tutorial
Using Google Fonts
Google Fonts is an open source font library with several different families that can be included. The fonts are not added to your website directory and are instead linked off of Google. Google Fonts allows you to add several fonts to a collection and then choose the weight and style to be used and how much load type is needed to load the collection.
Once selected, Google creates a reference link to add in the tag of your webpages. For example, here is what the code would look like if the chosen fonts were basic Open Sans and Roboto.
It then generates the needed font-family tags to add to the CSS for your text variables. The code below demonstrates how to add the Roboto font to the