Rule n° 185 - A generic font family is listed as the last alternative in font family lists.

Goal

• Enable your content to display correctly,
• even when the planned fonts don’t exist on a user’s system.

Implementation

In each CSS stylesheet, indicate the appropriate generic font family in the font-family or font properties:

• For serif fonts (such as Times Roman), specify the generic serif font family last. In the following example, the term "serif" has been correctly added as the last item in the list of fonts: font-family: Georgia, "Bookman OldStyle", serif.
• For sans serif fonts (such as Arial), specify the generic sans-serif font family last. For example: font-family: Optima, "Trebuchet MS", sans-serif;
• For monospace fonts (such as Courier), specify the monospace generic font family last. For example, font-family: Courier, monospace ;
• Likewise, use the generic cursive and fantasy families for the handwritten and fantasy fonts.

Find out more:

Control

In all CSS style sheets (for all media: screen, print, etc.):

• Check using a browser development tool that each font or font-family property contains one of the terms relating to generic font families: serif, sans-serif, monospace, cursive or fantasy;
• Check that these terms are located at the end of the listing for each font or font-family property;
• Ensure the relevance of the generic family indicated: serif for serif fonts, sans-serif for sans serif fonts, monospace, cursive or fantasy in special cases.

This can also be checked by validating the HTML page using the W3C CSS validator (http://jigsaw.w3.org/css-validator/) which then warns if there are no generic font families.

By Opquast - Read the license

Business application and benefits

The rules should be applied to your projects from the design phase through to post-implementation , and they should be understood by all professionals with web and customer experience (CX) responsibilities: from strategy to operations, marketers to project managers, and editorial to technical staff. The benefits of using this ruleset are numerous, including improving customer satisfaction, web performance, and e-commerce, and expanding your client base, while also decreasing your errors and costs.

The objective of these rules and the Opquast community mission is ‘making the web better’ for your customers and for everyone! Opquast rules cover the key major areas of risk that can negatively affect website users such as privacy, ecodesign, accessibility and security.

Opquast training has already allowed over 11,000 web professionals to have their skills certified. Train your teams or your students, contact us