CSS
CSS Fonts
Selecting the right font for your website leaves a long-lasting impact on the visitors and readers. When choosing a font, ensure it is reader-friendly and becomes an identity of your brand. From font style to size, everything matters.
Generic Font Families
CSS offers five generic font families. You can choose any font family that fits your desired font style requirements. The details of these fonts are given below:
- In Serif fonts, each letter’s edge has small strokes. It creates elegance and sophistication to the text.
- On the other hand, Sans-serif fonts have no strokes on the edges of their letters, unlike serif fonts. It gives a simple yet modern visual appearance to the website.
- All the letters in Monospace fonts have the same width. It gives the text a uniform mechanical appearance.
- To give the effect of handwritten scripts, cursive fonts are best. It creates an artistic and handwritten touch.
- Fantasy fonts are highly decorative and playful in nature. They are typically used for creative and attention-catching purposes.
.serif { font-family: serif; }
.sans-serif { font-family: sans-serif; }
.monospace { font-family: monospace; }
.cursive { font-family: cursive; }
.fantasy { font-family: fantasy; }The CSS font-family Property
Developers use this property to specify the font of a text in CSS.
Use quotation marks to specify a font name that is two or three words long. For example, “Times New Roman.”
Pro Tip
It’s best to choose more than one font name when using the CSS font-family property. Fonts other than the primary choice will serve as a backup. So, if your desired font is not available on a user’s system, the browser can easily reselect a similar font from the list.
- Prepare the list according to your font preference. In the list, your most preferred font must be at the top.
- Must separate all the font names using a comma.
.custom-font {
font-family: "Times New Roman", Georgia, serif;
font-size: 18px;
}CSS Web Safe Fonts
When choosing a font for your website, developers should be aware of the fonts that are universally supported across all browsers and devices. These are also known as web safe fonts.
Best Web Safe Fonts
The best of all web safe fonts are:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
.arial { font-family: Arial, sans-serif; }
.verdana { font-family: Verdana, sans-serif; }
.tahoma { font-family: Tahoma, sans-serif; }
.trebuchet { font-family: "Trebuchet MS", sans-serif; }
.times { font-family: "Times New Roman", serif; }
.georgia { font-family: Georgia, serif; }
.garamond { font-family: Garamond, serif; }
.courier { font-family: "Courier New", monospace; }
.brush { font-family: "Brush Script MT", cursive; }Fallback Fonts
Although it is believed that all major operating systems and devices have access to all web safe fonts, the chance of a font not being properly installed is never zero. That’s when fallback fonts come in handy. These are like backup fonts. So, if one font does not work for a certain browser, it can try the other ones on the list.
Commonly Used Font Fallbacks
Here is a list of font fallbacks that are most commonly used when the preferred web safe font does not work.
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
.serif-fallback {
font-family: "NonExistentFont", Times, serif;
}
.sans-serif-fallback {
font-family: "NonExistentFont", Arial, sans-serif;
}
.monospace-fallback {
font-family: "NonExistentFont", "Courier New", monospace;
}
.cursive-fallback {
font-family: "NonExistentFont", "Brush Script MT", cursive;
}
.fantasy-fallback {
font-family: "NonExistentFont", "Papyrus", fantasy;
}Font Style
This property is used to change the style of the font. It can be:
- Normal
- Italic or
- Oblique
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }Font Weight
This property is used to specify the weight of a font, such as normal, bold, or thick.
.normal { font-weight: normal; }
.bold { font-weight: bold; }
.light { font-weight: 300; }
.medium { font-weight: 500; }
.extra-bold { font-weight: 800; }Font Variant
This property controls whether the text appears in small caps style or not. When used, all the lowercase letters are transformed into uppercase or capital letters. However, the size of the uppercase letters in this style is less than the original uppercase letter’s size.
.normal { font-variant: normal; }
.small-caps { font-variant: small-caps; }Font Size
You can set the text size with this CSS property. It plays a significant role in giving your website a proper design. Its value can be specified as either an absolute or relative size.
Absolute Font Size
In this, the size of the text is fixed to a specified value. Additionally, the user cannot change the font size if it is set to a fixed value. Use it when the results are known.
Relative Font Size
In this, the font size is set relative to the surrounding elements. Moreover, in this setting, users can adjust the text size as needed.
- The text size can be set in pixels, allowing users full control over the text size. Example
- Another text resizing tool is Em. This setting is supported in all browsers except the old versions of Internet Explorer.
Note: 1em = 16px - Viewport Width (vw) is also used for changing font size. The size of the user’s browser window adjusts the text size in this setting.
.absolute-size { font-size: 20px; /* Fixed size */ }
.relative-size-em { font-size: 1.5em; /* Relative to parent size */ }
.relative-size-percent { font-size: 120%; /* Also relative */ }
.parent {
font-size: 16px; /* Base size for em calculations */
margin-bottom: 20px;
}
.vw-text {
font-size: 5vw; /* Font size is 5% of the viewport width */
}CSS Google Fonts
Use Google Fonts for free if you don’t find your desired font in the CSS standard fonts list. To use a Google Font, all you need to do is add a custom style sheet link in the <head> section and apply the chosen font with CSS.
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">.google-font {
font-family: 'Roboto', sans-serif;
font-size: 20px;
}Don’t forget to add Fallback fonts as backup.
When using multiple Google Fonts, add a ( & ) at the end of each font name.
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Lobster
&display=swap" rel="stylesheet">Google Fonts can be styled like CSS Fonts. To add a style or effect to your specified Google Font, you must first enable it. Here’s how you can do it:
- Go to Google API and add effect=effectname.
- Then add the font name to which you desire to add an effect or style.
For example: Add neon effect to the “Serif” font.
Add multiple effects to the same font and separate effect names by adding a pipe ( | ).
For example: Add multiple effects to the “Serif” font.
CSS Font Pairings
You can also pair multiple fonts to create a unique font design. However, there are some font pairing rules that one must follow. Here is a list of these rules:
- Pair fonts that complement each other.
- A safe option is to choose fonts from font superfamilies. For example, Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif, and Lucida Math.
- Combine contrasting fonts instead of similar ones for best results. For example, Serif and San Serif are a great combo.
- To set the visual hierarchy of your webpage, it’s best to choose a dominant font. You can enhance the effect by modifying the font size, colour, and weight.
h1 {
font-family: 'Playfair Display', serif;
font-size: 36px;
font-weight: bold;
color: #2c3e50;
}
p {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
color: #333;
line-height: 1.6;
}