codescracker


css

CSS Fonts



« Previous Tutorial Next Tutorial »


A font can be defined as a set of characters, including letters, numbers, punctuation marks, and symbols, of a certain size and style.

The height of characters in a font is measured in points, where each point is approximately 1/72 inch. The width is measured in pitch, which refers to how many characters can fit in an inch. The pitch of a character also defines its boldness and thickness.

Apart from fonts, you can also apply various text styles, such as italic, bold, and underline, on a document using a Cascading Style Sheet (CSS). These styles can be applied by setting various text properties of a document, such as text-decoration, text-shadow, text-indent, text-stroke, and text-wrap. Application of these properties helps the reader to easily understand and identify important terms and information in a document.

Font represents the style and size of the text that is displayed in a Web browser. Apart from imparting a visual appealing to the content, fonts are also used to help users discriminate between different types of information. For example, you can easily distinguish a main level heading from its subheadings by applying different font sizes and styles to different levels of headings. The fonts are categorized under different font families describes in the table given below.

Font Family Description
Serif Refers to the font family in which the width of characters is proportional, and the characters are displayed with serifs (serifs are semi-structural details on the ends of some of the strokes). Proportional width means each letter in the text has different width according to its height. Some of the fonts that are included in this family are Times New Roman, Georgia, Palatino Linotype, Sylfaen, Garamond, Book Antiqua, Bookman Old Style, Perpetua, Rockwell, and Cambria.
Sans-serif Refers to the font family in which the width of characters is proportional, but does not have serifs. Some of the fonts that are included in this family are Microsoft Sans Serif, Verdana, Tahoma, Arial, Trebuchet MS, Arial Black, Lucida Sans Unicode, Franklin Gothic Medium, Arial Narrow, and Century Gothic.
Cursive Refers to the font family in which characters appear as human hand writing. Some of the fonts that are included in this family are Comic Sans MS, Monotype Corsiva, Bradley Hand ITC, French Script MT, Tempus Sans ITC, Mistral, Kristen ITC, Edwardian Script ITC, Maiandra GD, Blackadder ITC, and Vivaldi.
Fantasy Refers to the font family in which characters cannot be characterized under a single rule. Some of the fonts included in this family are Impact, Haettenschweiler, Papyrus, Copperplate Gothic Light, Copperplate Gothic Bold, Curlz MT, Felix Titling, Rockwell Extra Bold, Engravers MT, Juice ITC, Jokerman, Imprint MT Shadow, Goudy Stout, Castellar, Agency FB, Perpetua Titling MT, and Cooper Black.
Monospace Refers to the font family in which characters resemble the text written with a type writer. The characters are not proportional, which means, the width of each character is same. Some of the fonts of this family are Courier New, Lucida Console, OCR A Extended, Consolas, Lucida Sans Typewriter, Bitstream Vera Sans Mono, Andale Mono IPA, Andale Mono, OCRB, Monaco, and Terminal.

CSS Font Properties

In Hypertext Markup Language (HTML), you can change the size, style, and family of fonts using various CSS properties. CSS provides the following properties to perform different tasks that can be grouped according to their functionalities related to fonts and text.

Now, let's discuss about these font properties in detail.

CSS font-family

The font-family property used to specify the name of a font family to apply the specified font style on the text.

Please note that if you have specified a font family and that font family is not installed on your computer, then the Web browser displays the text in another font.

You can specify more than one font family in the font-family property, so that, if one font is not installed on your computer then the Web browser can display the second specified font.

The following code fragment shows an example of using the font-family property.

body'
{
	font-family: sans-serif;
}
h1
{
	font-family: sans-serif, monospace;
}

In the preceding code fragment, we have specified the font-family property of the BODY element as sans-serif. We have also specified the font-family property of the H1 element as sans-serif and monospace. In case, the sans-serif font family is not installed, the Web browser will display the heading in the monospace font.

Example

Let's look at the following example. This example uses the font-family property.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	p.serif
	{
		font-family: "Times New Roman", Times, serif;
	}
	p.sansserif
	{
		font-family: Arial, Helvetica, sans-serif;
	}
	</style>
</head>
<body>

<h2>CSS font-family Example</h2>
<p class="serif">This is written in Times New Roman font.</p>
<p class="sansserif">This is written in Arial font.</p>

</body>
</html>

Here is the sample output produced by the above CSS font-family example code:

CSS Font Family

CSS font-size

The font-size property is used to change the size of the text. The value of the font-size property is often specified in pixels, as shown in the following code fragment.

p
{
	font-size: 12px;
}

The font size can be specified in the following three different ways.

Let's now discuss each of these ways in details.

CSS Absolute Values

Absolute value refers to the absolute size of the font. Absolute sizes are predefined fixed sizes that cannot be changed by a user. The following font sizes are categorized under the absolute values.

The xx-small is the smallest text size, xx-large is the largest text size, and rest comes in between. The following code fragment shows an example of the font-size property using the absolute values.

p
{
	font-size: x-small;
}

CSS Relative Values

Relative values refer to the values that are not fixed value and are calculated on the basis of the current font values.

Consider a case in which an element has a child element and the font size of the child element is set with a relative value, which you can increase or decrease by specifying as smaller or larger. The smaller value displays the child element with font size one unit smaller than the font size of the parent element and the larger value displays the child element with font size one unit larger than the font of the parent element.

The following code fragment is an example of the font-size property using a relative value.

p
{
	font-size: larger;
}

In the preceding code fragment, the font of the child element, p, is displayed one size larger that its parent element.

CSS Percentage Value

You can also increase or decrease the font size of the text by specifying a percentage value in the font-size property. The percentage value is relative to the size of the parent element, which is the base value. For instance, if you set the percentage value for the font size to 50%, then the font size increases 50% to its current size.

The following code fragment is an example of the font-size property using the percentage values.

p
{
	font-size: 20%;
}

In the preceding code fragment, the font size of the text will be increased by 20%. In case, you want to decrease the font size, specify the percentage in negative, such as -20%.

CSS font-size Example

Let's look at the following example to understand all the properties values. This example demonstrates CSS font-size property.

<!DOCTYPE HTML>
<html>
<head>
	<title>CSS Fonts Example - codescracker.com</title>
	<style>
		.p1 { font-size: medium; }
		.p2 { font-size: xx-small; }
		.p3 { font-size: x-small; }
		.p4 { font-size: small; }
		.p5 { font-size: large; }
		.p6 { font-size: x-large; }
		.p7 { font-size: smaller; }
		.p8 { font-size: larger; }
		.p9 { font-size: 25px; }
		.p10 { font-size: 150%; }
	</style>
</head>
<body>

<p class="p1">This CSS font with font-size: medium</p>
<p class="p2">This CSS font with font-size: xx-small</p>
<p class="p3">This CSS font with font-size: x-small</p>
<p class="p4">This CSS font with font-size: small</p>
<p class="p5">This CSS font with font-size: large</p>
<p class="p6">This CSS font with font-size: x-large</p>
<p class="p7">This CSS font with font-size: smaller</p>
<p class="p8">This CSS font with font-size: larger</p>
<p class="p9">This CSS font with font-size: 25px</p>
<p class="p10">This CSS font with font-size: 150%</p>

</body>
</html>

Here is the sample output of the above CSS font-size property example code:

CSS Font Size

Note - In case if you do not specify the font-size property, then the default size for normal text like paragraphs, is 16px (16px=1em).

CSS Set font-size with pixels

You can use CSS font-size property to set font size of the text with pixels. Let's look at the following example demonstrates how to set font-size with pixels.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	.p1
	{
		font-size: 25px;
	}
	.p2
	{
		font-size: 20px;
	}
	.p3
	{
		font-size: 12px;
	}
	</style>
</head>
<body>

<p class="p1">This CSS font with 25px font size.</p>
<p class="p2">This CSS font with 20px font size.</p>
<p class="p3">This CSS font with 12px font size.</p>

</body>
</html>

Below is the sample output of the above CSS font size example code:

CSS Font Size using Pixel

CSS Set font-size with em

You can use CSS font-size property to set font size of the text with em. 1em is equal to the current font size. As the default text size in browsers is equal to 16px. Therefore, 1em is equal to 16px. Here is an example shows how to set font-size with em.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	.p1
	{
		font-size: 1.75em;
	}
	.p2
	{
		font-size: 1.50em;
	}
	.p3
	{
		font-size: 0.75em;
	}
	</style>
</head>
<body>

<p class="p1">This CSS font with 1.75em font size.</p>
<p class="p2">This CSS font with 1.50em font size.</p>
<p class="p3">This CSS font with 0.75em font size.</p>

</body>
</html>

Below is the output produced by the above CSS font size with em example code:

CSS Font Size using em

CSS Set font-size with percentage

You can also set the font size with percentage (%). In %, 100% for the default, lesser than it for the smaller size and greater than it for the larger size. Let's look at the following example, illustrates how to set font-size with percentage value.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	.p1
	{
		font-size: 75%;
	}
	.p2
	{
		font-size: 100%;
	}
	.p3
	{
		font-size: 150%;
	}
	</style>
</head>
<body>

<p class="p1">This CSS font with 75% font size</p>
<p class="p2">This CSS font with 100% font size</p>
<p class="p3">This CSS font with 150% font size</p>

</body>
</html>

Here is the sample output of the above CSS font-size property using percentage value example code:

CSS Font Size using Percentage

CSS font-size-adjust

The font-size-adjust property is used to change the aspect value of the text on a Web page. The aspect value is the ratio between the font height of a lowercase letter and the actual height of the font. This ratio is also known as the x-height. For example, the aspect value of the Verdana font is 0.58, which means that when the font size of 100px, the height of a character written in lowercase of Verdana font is 58 pixels.

In case of Times New Roman font, when the font size is 100px, its x-height is 46 pixels. This means that the aspect value of the Times New Roman font is 0.46. You can increase or decrease the height of the font by modifying its aspect value.

The following code fragment is an example of using the font-size-adjust property.

p
{
	font-size-adjust: 0.5;
}

In the preceding code fragment, the font size is adjusted to 0.5 x-height.

CSS font-stretch

The font-stretch property is used to change the width of a font. Using this property, you can condense or expand the width of the font by specifying the following values.

The following code fragment is an example of using the font-stretch property.

p
{
	font-stretch: condensed;
}

In the preceding code fragment, the width of the font is decreased or condensed than its original size.

CSS font-style

The font-style property is used to specify the style of the font. The possible values of the font-style property are normal italic, and oblique.

The following code fragment is an example of using the font-style property.

p
{
	font-style: italic;
}

In the preceding code fragment, the style of the font is set to italic, which means that the text will appear in italics.

CSS font-style Example

Let's look at the following example, demonstrates CSS font-style property.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	p.normal
	{
		font-style: normal;
	}
	p.italic
	{
		font-style: italic;
	}
	p.oblique
	{
		font-style: oblique;
	}
	</style>
</head>
<body>

<p class="normal">This CSS font is in normal style.</p>
<p class="italic">This CSS font is in italic style.</p>
<p class="oblique">This CSS font is in oblique style.</p>

</body>
</html>

Here is the sample output of the above CSS font-style property example code:

CSS Font Styles

CSS font-variant

The font-variant property is used to display a font as normal or in small-caps. When you set the font-variant property of a font to small-caps, the font written in lower case displays in the smaller version of the uppercase letter.

The following code fragment is an example of the font-variant property.

p
{
	font-variant: small-caps;
}

In the preceding code fragment, we have specified the font-variant property of the p element to small-caps. The text written in the p element displays in the smaller version of the uppercase letters.

CSS font-variant Example

Let's look at the following example that demonstrates how to use font-variant property in CSS.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	p.normal
	{
		font-variant: normal;
	}
	p.small
	{
		font-variant: small-caps;
	}
	</style>
</head>
<body>

<p class="normal">This CSS font with font-variant: normal</p>
<p class="small">This CSS font with font-variant: small-caps</p>

</body>
</html>

Here is the sample output of the above CSS font-variant property example code:

CSS Font Variant

CSS font-weight

The font-weight property is used to specify the weight of the font, such as the font boldness or thickness.

Font weight is a term used to signify the extent of boldness or thickness assigned to a character, when a particular font is applied to it. For example, the font weight of a character written in the Cooper Black font, A, is more than the same letter, A written in the Arial font.

Here are the list of possible values for the font-weight property.

The following table describes details of the numbers that are used with the font-weight property.

Values Description
100 Represents the thin font
200 Represents the extra light (ultra light) font
300 Represents the light font
400 Represents the normal font
500 Represents the medium font
600 Represents the semi bold font
700 Represents the bold font
800 Represents the extra bold (ultra bold) font
900 Represents the black (heavy) font

CSS font-weight Example

Let's look at the following example demonstrates how to use font-weight property in CSS.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Fonts Example</title>
	<style>
	p.normal
	{
		font-weight: normal;
	}
	p.light
	{
		font-weight: lighter;
	}
	p.thick
	{
		font-weight: bold;
	}
	p.thicker
	{
		font-weight: 900;
	}
	</style>
</head>
<body>

<p class="normal">This CSS font with normal weight paragraph.</p>
<p class="light">This CSS font with light weight paragraph.</p>
<p class="thick">This CSS font with thick paragraph.</p>
<p class="thicker">This CSS font with thicker paragraph.</p>

</body>
</html>

Following is the sample output of the above CSS font-weight property example code:

CSS Font Weight

CSS font Shorthand

Instead of defining all the properties, such as font-style, font-weight, and font-style, separately, you can specify the values of all these properties in the font property.

The following is an example of using the font property.

p
{
	font: bold italic 30px verdana;
}

In the preceding code fragment, we have specified the values of the font-weight, font-style, font-size, and font-family properties as bold, italics, 30px, and Verdana, respectively, as the value of the font property.

CSS font Shorthand Example

Let's look at the following example. This CSS example, shows how to use CSS font shorthand.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Font Shorthand Example</title>
	<style>
	p
	{
		font:italic small-caps bold 20px georgia;
	}
	</style>
</head>
<body>

<p>This CSS font with shorthand font properties</p>

</body>
</html>

Here is the sample output produced by the above CSS font shorthand example code:

css shorthand font properties

Now, let's discuss about the Web font.

CSS Web Font

Web font is a feature that allows you to write text in fonts other than those existing in your system. The Web font feature is introduced in the latest version of CSS, that is CSS3. This feature eliminates the restriction of using the limited number of fonts that are installed on your computer. You can also use the fonts that are available online by specifying their Uniform Resource Locator (URL) in the style sheet. In CSS3, you can define the name of the desired font by using the @font-face keyword in the style sheet.

The following is the syntax for defining the Web font in your style sheet.

@font-face
{
	font-family: <name>
	src: <source>
}

In the preceding syntax, you need to define the name of the font that you want to use in your Web page in the font-family attribute, and the address of the URL of the font in the src attribute.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test