CSS Lesson 5: Font

0
17

Font

Fonts are an important element of text. CSS provides full control over fonts. You can set the font size, color, family, style, variant and weight using CSS font properties.

Types of CSS Font Families

It’s important for you to understand the structure of the fonts so that you can identify the font-family. In case you forgot the actual name of the font, you can simply write the group name and the browser will detect it automatically. In CSS, fonts are categorized into three groups:

Groups Description Example
Serif This font include small edges or lines at the end of characters

Times New Roman

Georgia

Sans-Serif This font doesn’t include small edges or lines at the end of characters

Calibri

Arial

Monospace Monospace fonts have same width. Usually, this font is used for displaying codes in HTML.

Courier New

Lucida Console

[tooltip]All group types¬†are widely used in web designing. It’s recommended to use the sans-serif fonts, because they are easier to read.[/tooltip]

Font Family

You can use the font family name or the actual name of the font. In CSS, the best practice is to use a minimum of three fonts of the same family rather than one font. That way, in case the browser doesn’t support one font, it could load the others. This is known as a “fallback” system. A good approach is to first write the name you want to use and then end with the font family name.

Source Code Output

WikiProgramming CSS Serif Font Example

WikiProgramming CSS Sans-Serif Font Example

Font size

The default font-size is 16px. In CSS, you can define the font-size in the following ways:

  • Percentage: For default font of a webpage, it’s best to define font-size in a percentage. It is commonly used in body tag.
  • Values: It includes pixels, pt and em. Values give you more control over the text and you can adjust them quickly. Among all
  • values, em is the best approach. You can easily calculate it. Its formula is 1 em=pixels/16.

Here is a simple demonstration for you

Source Code Output

WikiProgramming CSS Pixel Font Size Example

 

WikiProgramming CSS em Font Size Example

Font Style

Adjust your font into normal, italic, and oblique.

Source Code Output

WikiProgramming CSS Italic Font Style Example

 

WikiProgramming CSS Oblique Font Style Example

Font variant

If you have bunch of line to convert into small caps, then CSS Font Variant is your solution! Checkout the following example

Source Code Output

this text is now converted into small-caps.

Font weight

The last font property is font-weight. It’s used to bold the whole font instead of few pieces of text. Instead of the word “bolder,” you can define it more specifically by using numbers, e.g 100, 200, 300 etc.

Source Code Output

This text is weight with value

 

This text is weight with bolder

Shorthand code

Have you noticed that all Font properties start with a font word i.e. font-family, font-size, font-variant etc? CSS facilitates combining all the sub-properties, which is called Shorthand. You can use it to list all the characteristics you want, like the family and size, and combine them as one easy-to-write font. For example:

Check out this example:

Not combined Combined

You see how easily we combined Font properties using Shorthand.

Summary

  • Font-families are serif and sans-serif.
  • First write the font name you want to use and end with font family name.
  • Set font-size in percentage and values.
  • Use font-style for italic and oblique text.
  • Use font-variant to convert text into small-caps
  • Use font-weight to bold the text.

Next Lesson

Enough learned about text and font. Now let’s design the Background with CSS.

Leave a Reply