Deal with Fonts

Deal with Fonts is the section 6 of Beginner’s Guide to CSS.

In the previous section if you can remember we were dealing with texts. In this section we are dealing with Fonts. So what is the difference between the concept of  font and text. Let’s clarify this out before moving in.

Text: Few characters you draw with a selected font.

Font: The shapes of a character in the text.

Hope you now get the idea. In the CSS font property, it defines the font family, boldness and size kind of stuff. Let’s move into each of these.

Font Family

There are 3 types of generic font families  and each of it have groups of font families on it.

  • Serif
  • Sans-Serif
  • Monospace

It is believed that on the computer screen groups of font families in the type of Sans-Serif are easier to read on a glimpse of an eye.

Let’s see why is that.

Sans-Serif Serif

Check the edges of the characters. Those juts are called serifs. When there is no juts, we called it sans-serifs. When there is no juts people can read it very fast. That’s why posters and banners are always written in sans-serif fonts. In the other hand most of books and articles with long paragraphs are written with serif font, because to keep the reader’s eye on the page for a while.

Monospace fonts can include both of these sans-serifs and serifs, but the specialty is, each character has the same width.







See how far the Monospace ended up. Even though the chacarter ‘i’ need only a narrow space to sit there like as in sans-serif and serif, monospace ‘i’ took the whole space like as the other characters of it.

Now it’s time to see few example font families.  Check if you are familiar with any one of these font families.

Serif Times New Roman
Sans-serif Arial
Monospace Courier New
Lucida Console

In the css font-family property will override the default font family of your browser when the page is displaying. Also you can mention several font families in a specific order that the browser can tryout if the font is not available on your system. The recommended way is to 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. And remember to surround the font family with suitable quotation marks if the family name is more than a one word. 

[code language=”css”] p {
font-family: "Times New Roman", Times, serif;

There will be lot of nice looking fonts available on the net that you may attract, but we’re recommending you to use only web safe fonts. They are the fonts you are always happen to see.

Font Style

This is the other way of creating italic words.  Can you remember tag of HTML. This is same as that.

[code language=”css”] p {
font-style: italic;

CSS way of italics

HTML way of italics

Font Weight

This is the other way of creating bold words.  Can you remember tag of HTML. This is same as that.

[code language=”css”] p {
 font-weight: bold;

CSS way of bold

HTML way of bold

Or else you can define the boldness with giving a specific value.

Font Size

The font-size property sets the size of the text. It overrides the default size of the browser when the page displays. Managing the text sizes of the web content is most important to attract readers. However, you should not use font sizes to make paragraphs look like headings, or headings look like paragraphs. Because that is not the purpose of font size. Always use the proper HTML elements, like


for headings and

for paragraphs.

The value of the font size property can define in two ways.

[code language=”css”] p {
font-size: 20px;

p {
font-size: 2em;

Absolute size:

  • Sets the text to a specific size with pixels so you have the full control of the text.

    Size of 10 text

    Size of 20 text

    Size of 30 text

    Size of 40 text

  • Not allowing a user to change the text size in all browsers
  • Useful when the physical size of the output is known

Relative size:

  • Sets the size relative to the surrounding elements.

    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

    Size of 1em text

    Size of 2em text

    Size of 3em text

    Size of 4em text

  • Allows a user to change the text size in browsers


Font Variant

One way to add another cool font effect is using the font-variant property.

[code language=”css”] p {
font-variant: small-caps;

See how nice it would look. Each lower case letter becomes a uppercase letter and each uppercase letter become big sized  letter.

Lex Luther – Original Text

Lex Luther – Converted Text


Like we did in the css background section, we can shorten the code by write only the property font.

[code language=”css”] p.ex2 {
font:italic bold 12px/30px Georgia, serif;

So in this section we go beyond of having font effects. So combining the text and font effects, you can have a attractive text content on your web page. In the next section we are going to style and decorate our HTML anchor tag using CSS.


Let’s learn how CSS Decorating Hyperlinks.


Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.


Leave a Reply
  1. Thanks relating to spreading that excellent subject theme with your web-site. I came across it around the search engines like Google. I could look again whenever you post additional articles.

  2. It’s actually a nice and useful piece of information.
    I am satisfied that you simply shared this helpful info with us.

    Please stay us up to date like this. Thanks for sharing.

  3. Woah! I’m really enjoying thhe template/theme of this website.

    It’s simple, yet effective. A lot of times it’s very hard to get that
    “perfect balance” between user friendliness and visual appearance.

    I must ssay that you’ve done a great job with this.
    Additionally, the blog loads very fast for me on Chrome.

    Exceptional Blog!

  4. Woah! I’m really enjoying the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s hard to get
    that “perfect balance” between user friendliness and visual appeal.
    I must say you’ve done a excellent job with this.
    Also, the blog loads super quick for me on Opera.
    Superb Blog!

  5. Your style is very unique compared to other people
    I have read stuff from. Thanks for posting when you have the opportunity, Guess I’ll just bookmark
    this site.

Comment Below