Categories
CSS Web development

CSS Fonts

About text and fonts in HTML I have mentioned already a few weeks ago here. You could learn there about basic text formatting which you can input in the HTML document. Today I would like to take a deeper look at text and fonts which we can use in CSS. The CSS font properties define the font family, boldness, size, and style of the text. 

In CSS, there are two types of font-family names. 

Generic family (sans-serif, serif, monospace)- a group of font families with a similar look (like “Serif” or “Monospace”).

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 characters have the same width.  

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. 

Example:

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

p.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>

Output:

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 italics. 

Oblique – the text is “leaning” (oblique is similar to italic but less supported). 

Example:

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

p.italic {
  font-style: italic;
}

p.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:

The font-size property sets the size of the text. Being able to manage the 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 specify 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>

<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>

Output:

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

Example:

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

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

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

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

Output:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *