Choosing the right font for your website is important!
Font Selection is Important
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text. It is also important to choose the correct color and text size for the font.
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
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
In CSS, we use the font-family property to specify the font of a text.
Tip: The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma. Read more about fallback fonts in the next chapter.
Example
Specify some different fonts for three paragraphs:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Result:
What are Web Safe Fonts?
Web safe fonts are fonts that are universally installed across all browsers and devices.
Fallback Fonts
However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.
Therefore, it is very important to always use fallback fonts.
This means that you should add a list of similar “backup fonts” in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.
Example
Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Result:
Best Web Safe Fonts for HTML and CSS
The following list are the best web safe fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (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 (sans-serif)
Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs.
Arial is one of the safest web fonts, and it is available on all major operating systems.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Result:
Verdana (sans-serif)
Verdana is a very popular font. Verdana is easily readable even for small font sizes.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Result:
Tahoma (sans-serif)
The Tahoma font has less space between the characters.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Result:
Helvetica (sans-serif)
The Helvetica font is loved by designers. It is suitable for many types of business.
Example
Trebuchet MS (sans-serif)
Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.
Example
Times New Roman (serif)
Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and “news” websites. It is also the primary font for Windows devices and applications.
Example
Georgia (serif)
Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.
Example
Garamond (serif)
Garamond is a classical font used for many printed books. It has a timeless look and good readability.
Example
Courier New (monospace)
Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.
Example
Brush Script MT (cursive)
The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.
Example
Commonly Used Font Fallbacks
Below are some commonly used font fallbacks, organized by the 5 generic font families:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
- normal – The text is shown normally
- italic – The text is shown in italics
- oblique – The text is “leaning” (oblique is very similar to italic, but less supported)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Result:
The font-style property
This is a paragraph in normal style.
This is a paragraph in italic style.
This is a paragraph in oblique style.
Font Weight
The font-weight property specifies the weight of a font:
Example
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Result:
The font-weight property
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
Example
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Result:
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> – <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
- Sets the text to a specified size
- Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- Absolute size is useful when the physical size of the output is known
Relative size:
- Sets the size relative to surrounding elements
- Allows a user to change the text size in browsers
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Result:
This is heading 1
This is heading 2
This is a paragraph.
This is another paragraph.
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it
ecomes larger/smaller than it should.</p>
</body>
</html>
Result:
In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with older versions of Internet Explorer. The text becomes larger than it should when made larger, and smaller than it should when made smaller.
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for the <body> element:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Result:
Responsive Font Size
The text size can be set with a vw unit, which means the “viewport width”.
That way the text size will follow the size of the browser window:
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body> <h1 style="font-size:10vw;">Responsive Text</h1> <p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p> <p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p> <p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p> </body> </html>
Result:
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Example
Here, we want to use a font named “Sofia” from Google Fonts:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>
Result:
Example
Here, we want to use a font named “Trirong” from Google Fonts:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Trirong”>
<style>
body {
font-family: “Trirong”, serif;
}
</style>
</head>
Result:
Example
Here, we want to use a font named “Audiowide” from Google Fonts:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Audiowide”>
<style>
body {
font-family: “Audiowide”, sans-serif;
}
</style>
</head>
Result:
Use Multiple Google Fonts
To use multiple Google fonts, just separate the font names with a pipe character (|), like this:
Example
Request multiple fonts:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong”>
<style>
h1.a {font-family: “Audiowide”, sans-serif;}
h1.b {font-family: “Sofia”, sans-serif;}
h1.c {font-family: “Trirong”, serif;}
</style>
</head>
Result:
Styling Google Fonts
Of course you can style Google Fonts as you like, with CSS!
Example
Style the “Sofia” font:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Result:
Enabling Font Effects
Google have also enabled different font effects that you can use.
First add effect=effectname to the Google API, then add a special class name to the element that is going to use the special effect. The class name always starts with font-effect- and ends with the effectname.
Example
Add the fire effect to the “Sofia” font:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=fire”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class=”font-effect-fire”>Sofia on Fire</h1>
</body>
Result:
To request multiple font effects, just separate the effect names with a pipe character (|), like this:
Example
Add multiple effects to the “Sofia” font:<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple”>
<style>
body {
font-family: “Sofia”, sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class=”font-effect-neon”>Neon Effect</h1>
<h1 class=”font-effect-outline”>Outline Effect</h1>
<h1 class=”font-effect-emboss”>Emboss Effect</h1>
<h1 class=”font-effect-shadow-multiple”>Multiple Shadow Effect</h1>
</body>
Result:
Font Pairing Rules
Here are some basic rules to create great font pairings:
1. Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2. Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif and Lucida Math.
3. Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font.
Example: Combining serif with sans serif is a well known combination.
A strong superfamily includes both serif and sans serif variations of the same font (e.g. Lucida and Lucida Sans).
4. Choose Only One Boss
One font should be the boss. This establishes a hierarchy for the fonts on your page. This can be achieved by varying the size, weight and color.
Example
No doubt “Georgia” is the boss here:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Result:
Georgia and Verdana
Georgia and Verdana is a classic combination. It also sticks to the web safe font standards:
Example
Use the “Georgia” font for headings, and “Verdana” for text:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
font-size: 16px;
}
h1 {
font-family: Georgia, serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Result:
Helvetica and Garamond
Helvetica and Garamond is another classic combination that uses web safe fonts:
Example
Use the “Helvetica” font for headings, and “Garamond” for text:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
font-size: 16px;
}
h1 {
font-family: Helvetica, sans-serif;
font-size: 46px;
}
</style>
</head>
<body>
<h1>Beautiful Norway</h1>
<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>
<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>
</body>
</html>
Result:
The CSS Font Property
To shorten the code, it is also possible to specify all the individual font properties in one property.
The font property is a shorthand property for:
font-stylefont-variantfont-weightfont-size/line-heightfont-family
Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.
Example
Use font to set several font properties in one declaration:
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>
Result:
