CSS Tutorial Lesson 13: Typeface and Font Size

In this lesson, we shall learn how to format the text of your webpage by choosing various typefaces and manipulate their appearances such as font-size, bold and italic

13.1 Typeface

In CSS, we use the the font-family property to specify the typeface of the text inside any HTML element. Some of the common typefaces are Serif, Arial, Sans-serif, Monospace, Times New Roman, Verdana, Courier, Comic Sans MS and more.

Example 13.1

Fomatting Text in CSS

Typefaces in CSS

Font-family in CSS

In this lesson, we shall learn how to format the text of your webpage by choosing various typefaces and manipulate their appearances such as font-size, bold and italic

The Output

Fomatting Text in CSS

Typefaces in CSS

Font-family in CSS

In this lesson, we shall learn how to format the text of your webpage by choosing various typefaces and manipulate their appearances such as font-size, bold and italic

13.2 Font-size

We use the font-size property to specify the  font size for text. In CSS, there are  a few ways to define the size of the font we will examine three most common ways, as follows:
a) Using Pixels
This is the most common way to specify the font size. The syntax is illustrated in the following example;

P{font-size:12px;}

The default size of text in a browser is 16px.
b) Using Percentage
Another way to specify the font size is using percentage. It is expressed in terms of the percentage of the default font-size of the browsers, which is 16px. For exmple,

H1{font-size: 125 %}

will specifies the size of the font  within the H1 elements to be 20px.
However, if we specify the font size of the text inside the tags to be 125%, which is equivalent to 20px, and then specify the font size of the text within an element inside the tags to be 60%, then its font size is 20px multiple by 60% which give us a font size of 12px.
c) Using EMS
The last method of specifying font size is by using EMS, the width of the letter m. The conversion scale is 1em=16px

Example 13.1

What is CSS ?

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background colour, font typeface, font-size, line spacing and more . The rule of CSS comprises two parts, the selector part and the declaration part.

The selector is an HTML element and the declaration  specify rules to be adhered by the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declarations, each separated by semicolons. A declaration consists of two parts, the property and its value.

The Output

What is CSS ?

CSS works together with HTML elements using a set of rules to control the look of a webpage such as background colour, font typeface, font-size, line spacing and more . The rule of CSS comprises two parts, the selector part and the declaration part.

The selector is an HTML element and the declaration specify rules to be adhered by the HTML element defined by the selector. The selector can define more than one HTML elements, separated by commas. You can also have more than one declarations, each separated by semicolons. A declaration consists of two parts, the property and its value.