CSS font: family MCQs Quiz | Class 10

Understanding CSS font-family Property and Typeface Families

The CSS font-family property is fundamental for controlling the appearance of text on a web page. It allows web developers to specify the priority list of font families or generic family names for the selected element. This ensures that if the user’s browser or operating system does not support the first font, it tries the next one in the list, providing a robust fallback mechanism.

Key Concepts of font-family

• Syntax: The property takes one or more font family names, separated by commas. Example: font-family: "Times New Roman", Times, serif;
• Specific Font Names: These are the names of specific fonts, like “Arial”, “Verdana”, “Times New Roman”, “Helvetica Neue”. If a font name contains spaces, it must be enclosed in single or double quotes.
• Generic Font Families: These are keyword values that specify a category of fonts, representing a common style. Browsers will use a default font from that category if no specific font is available. It is crucial to end every font-family declaration with a generic family name as a universal fallback.
• Fallback Mechanism: The browser attempts to apply fonts in the order they are listed. If the first font is not found, it moves to the second, and so on, until it finds an available font or defaults to the specified generic family.

Exploring Typeface Families

Typeface families are broadly categorized based on their visual characteristics. Understanding these categories helps in choosing appropriate fonts for different contexts and ensuring good readability and aesthetics.

1. Serif Fonts:
   • Characteristics: Fonts in this family have small decorative strokes (serifs) at the end of the main strokes of characters. They are often associated with traditional print media, formality, and readability in long blocks of text.
   • Examples: Times New Roman, Georgia, Palatino.
2. Sans-serif Fonts:
   • Characteristics: These fonts lack the decorative serifs. They tend to have a cleaner, modern, and minimalist appearance. Sans-serif fonts are generally preferred for digital displays, headings, and short blocks of text due to their crispness on screens.
   • Examples: Arial, Helvetica, Verdana, Open Sans.
3. Monospace Fonts:
   • Characteristics: Every character in a monospace font occupies the same horizontal width. This makes them ideal for coding, tabular data, and situations where alignment is critical.
   • Examples: Courier New, Consolas, Monaco.
4. Cursive Fonts:
   • Characteristics: These fonts mimic human handwriting, often with connected or flowing letters. They are typically used for decorative purposes, invitations, or informal headings, but should be used sparingly for readability.
   • Examples: Brush Script MT, Comic Sans MS (though often debated), Great Vibes.
5. Fantasy Fonts:
   • Characteristics: These are highly decorative or artistic fonts that do not fit into other categories. They are often used for titles, logos, or specific themed designs, and usually have limited character sets.
   • Examples: Impact, Copperplate Gothic Light, some gaming or themed fonts.

Generic Font Families Overview

Quick Revision: What to Remember

• Always provide a fallback list for font-family.
• End your font-family list with a generic family.
• Quote font names with spaces (e.g., “Times New Roman”).
• Understand the visual impact of serif vs. sans-serif fonts.
• Monospace is great for code, Cursive and Fantasy for decoration.

Extra Practice Questions

1. Which property is typically used to set the font size of text in CSS?
2. If a user’s system does not have the font ‘CustomFont’, which font will the browser try to use next based on font-family: 'CustomFont', Arial, sans-serif;?
3. Which generic font family is best suited for displaying code snippets?
4. What is the significance of including a generic font family as the last option in a font-family declaration?
5. Explain the difference between a specific font name and a generic font family.