Font Family
It’s crucial to select the ideal font for your website!
Font Selection is Important
The way that readers interact with a website is greatly influenced by the typeface selection.
Your brand might have a powerful identity thanks to the choice of typeface.
It’s crucial to have an easy-to-read typeface. Your text gains value from the font. Selecting the appropriate font color and text size is also crucial.
Generic Font Families
In CSS there are five generic font families:
- Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
- Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
- Monospace fonts – here all the letters have the same fixed width. They create a mechanical look.
- Cursive fonts imitate human handwriting.
- Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
Difference Between Serif and Sans-serif Fonts
Note: Sans-serif fonts are thought to be easier to read on computer displays than serif fonts.
Some Font Examples
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
The CSS font-family Property
The font-family property in CSS is used to define a text’s typeface.
Remark: The font name must be included in quote marks if it consists of multiple words, such as “Times New Roman”.
A few font names should be stored in the font-family property as a “fallback” approach to maximize cross-browser and cross-OS compatibility. Begin with your preferred font and finish with a generic family (this will allow the browser to select a comparable font from the generic family in the event that no other fonts are available). A comma should be used to separate the font names. Continue reading about fallback fonts in the following chapter.
Example
Specify some different fonts for three paragraphs:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
