CSS Fonts - Lena Design

Using a font that is easy to read is very important. It is also important to choose the correct text size and colour for the font.

In CSS, there are two types of font-family names (Generic family, Font family):

Generic family – a group of font families with a similar look.

In CSS there are five generic font families:

Serif (fonts have small lines at the ends of some characters)
Sans-serif (where “sans” means without, these fonts do not have the lines at the ends of the characters)
Monospace (all monospace characers have the same width)
Cursive (fonts imitate human handwriting)
Fantasy (decorative fonts)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: 'Courier New', monospace;
}
  
.p4 {
  font-family: 'Brush Script MT', cursive;
}
  
.p5 {
  font-family: Impact, fantasy;
}
</style>
</head>
<body>

<p class="p1">This is a paragraph, shown in the Times New Roman font (serif).</p>
<p class="p2">This is a paragraph, shown in the Arial font (sans-serif).</p>
<p class="p3">This is a paragraph, shown in the 'Courier New' font (monospace).</p>
<p class="p4">This is a paragraph, shown in the 'Brush Script MT' font (cursive).</p>
<p class="p5">This is a paragraph, shown in the Impact font (fantasy).</p>

</body>
</html>

Output:

This is a paragraph, shown in the Times New Roman font (serif).

This is a paragraph, shown in the Arial font (sans-serif).

This is a paragraph, shown in the ‘Courier New’ font (monospace).

This is a paragraph, shown in the ‘Brush Script MT’ font (cursive).

This is a paragraph, shown in the Impact font (fantasy).

Font family- a specific font family (like “Times New Roman” or “Arial”)

The font family of the text is set with the font-family property. Start with the font you want, and end with the generic family, to let the browser a pick similar font in the generic family, if no other fonts are available (read also: Fallback Fonts).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  
.fallback {
  font-family: Pacifico, Helvetica, Tahoma, Sans-Serif;
}

</style>
</head>
<body>

<p class="fallback">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

The font-style property is mostly used to define 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 similar to italic but less supported).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

Output:

This is a paragraph in normal style.

This is a paragraph in italic style.

This is a paragraph in oblique style.

The font-size property sets the size of the text. Being able to manage text size is very important in web design. However, you shouldn’t use font size adjustments to make paragraphs look like headings and in the opposite way, headings look like paragraphs (always use proper HTML tags like <p> or <h1>. If you don’t define the font size, the default size for normal text, like paragraphs is 16px. 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>

<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

Output:

This is heading 3

This is heading 4

This is a paragraph.

This is another paragraph.

The font-weight property defines the weight of the font.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  
.normal {
  font-weight: normal;
}

.lighter {
  font-weight: lighter;
}
  
.bold {
  font-weight: bold;
}

.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="lighter">This is a paragraph.</p>
<p class="bold">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Output:

This is a paragraph.

Enjoy coding!

This is heading 3

This is heading 4

Share this: