Welcome to the CSS tutorial, we already covered CSS colors, CSS backgrounds, and today we will talk about CSS fonts. If you are familiar about CSS fonts, then you must be knowing that you can change the text size, text color, its style and many more things. In fact, you can say, CSS will allow you to control the look of text.
CSS Fonts Family
Two types of Fonts Family of CSS are:
- Serif – These types of font will include small lines at the end of the characters, except few characters like O or Q . Examples of serif are Times, Times New Roman,and Bookman.
- Sans-serif – This font is opposite to the Serif fonts, no small line at the ends of characters. Examples of sans-serif fonts are Gill Sans, Helvetica and Avantgarde.
Note: Monospace are those fonts that have a fixed width. Example of monospace fonts is Andale Mono, Courier New and Courier.
CSS fonts family –Examples
Let’s understand the practical use of CSS fonts, in the below example, we have used two <h2> tags, and two classes(‘ser’ and ‘sans’) to differentiate heading tags.
<html>
<head>
<style>
h2.ser { font-family: sans-serif; }
h2.sans { font-family: serif; }
</style>
</head>
<body>
<h2 class="ser"> Css font family</h2>
<h2 class="sans"> Example of serif - sharplesson</h2>
</body>
</html>
When you will run this program, then result would be:
You can clearly figure out the serif and sans-serif fonts, hopefully you understood the use of font family.
CSS Fonts – Size
It will simply set the font size of the text, and will equip the web designer with additional feature to design web with the quality. It doesn’t mean that you will adjust the font for heading or sub-headings, for that you have heading tags to use.
Let’s understand the use of font size, in the below example we will set the font size of <h2> tags with three different units, px, em, and percent.
<html>
<head>
<style>
h2.per {
font-size:350%
}
h2.emm {
font-size: 2.5em;
}
h2 {
font-size: 30px;
}
</style>
</head>
<body>
<h2 class="per">Use of Percent</h1>
<h2 class="emm">Use of em 2</h2>
<h2>Use of Pixels</h2>
</body>
</html>
The output of the above example will be:
You can specify px, em, or % as per your need, like we did in the above example to show you the difference.
Tip
- It will be good to use em, because it will help users to resize the text in the browser. If you are a developer, then your choice would be em unit.
- Well, in case you are using px unit, then don’t worry, you can use zoom function to resize the page.
CSS Fonts – Style
CSS fonts style will let you to set the style of font to italic or other options. You can use three font-style options:
- Italic
- Oblique
- Normal
Note: In general, people use italic property to style the font, because normal means no change and oblique is similar to italic. If they are, then just remember italic one.
<html>
<head>
<style>
h2.n {
font-style: normal;
}
h2.i {
font-style: italic;
}
h2.o {
font-style: oblique;
}
</style>
</head>
<body>
<h2 class="n">SharpLesson looks like Normal.</h2>
<h2 class="i"> SharpLesson looks like Italic.</h2>
<h2 class="o"> SharpLesson looks like Oblique </h2>
</body>
</html>
When you will run this program, then the output will be:
You can clearly see that normal is a normal text, and italic and oblique is almost the same.
Conclusion
We have just covered the CSS fonts, its type and how to use it, These are the most common use of CSS-fonts, in case you want to learn more about CSS font weight(It will let you to control the thickness of the font) and CSS font variant(It will allow you to convert font to all small caps), then refer our CSS reference.