Lesson 13: Typeface and Font Size

❮ Previous Lesson Next Lesson ❯

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

<h1 style="font-family:Comic Sans MS;">Formatting Text in CSS</h1>
<h2 style="font-family:Verdana;">Typefaces in CSS</h2>
<h3 style="font-family:Monospacce;">Font-family in CSS</h1>
<p style="font-family:Sans-serif;">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</p>

The Output

Formatting 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 example,

H1{font-size: 125 %}

will specify the size of the font within the H1 elements to be 20px.

However, if we specify the font size of the text inside the <body> tags to be 125%, which is equivalent to 20px, and then specify the font size of the text within an element inside the <body> 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

<h1 style="font-size:20px;>What is CSS ?</h1>
<p style=" font-size:120%">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.</p>
<p style=" font-size:0.8em">The selector is an HTML element and the declaration  specifies rules to adhere to 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 declaration, each separated by semicolons. A declaration consists of two parts, the property and its value.</p>

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 color, 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 specifies rules to adhere to 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 declaration, each separated by semicolons. A declaration consists of two parts, the property, and its value.

❮ Previous Lesson Next Lesson ❯