Text size
Choosing font sizes
Do not use font sizes below 12px. Generally, body font sizes should be at least 14px or 16px.
Important text should be in larger fonts than supplementary text.
Our WPDS Foundations font sizes start at 12px.
Scaling
Font size should scale automatically per the user's browser settings.
You can test this by accessing your browser settings and updating the font size, as shown below in Google Chrome. The process and options may vary between browsers and operating systems. Do your research for each situation you are testing.
Ensure after changing the font size that the fonts on your content scale automatically. We should meet our users where they are as much as possible, and that means responding to their settings.
Page zoom
Content on our pages should remain readable when a user increases their font size or enlarges text using zoom. Many users also have zoom settings configured in their browser (e.g. zoom defaults to 150% on each new page the user opens).
WCAG sets 200% as the minimum zoom level below which all content on a page should remain readable.
Zoom in using command + (Mac) or control + (Windows). You should be able to see the current zoom level momentarily, as shown below.
You'll want to watch for issues like overlapping text, text spilling out of containers, etc. that hinder readability as zoom level increases.
To fix such issues, ensure you are building components that resize dynamically. The below screenshot is from our homepage. We can see that it resizes into a one-column format to accomodate the high zoom level of 200%.
Font selection
Avoid using complicated fonts that present words in unfamiliar or elaborate ways, such as in cursive or cartoon-ish styling. These can be difficult to read. Additionally, writing in all caps or with irregular capitalization can make text harder to read, especially for screen reader users who may hear text read incorrectly do to irregular capitalization.
Our WPDS Foundations fonts are good examples of legible fonts. When using a non-WPDS font, consider the above to ensure it is accessible to users.
There is not a consensus as to whether serif or san-serif fonts are more readable in general. We at The Post use both.