Chapter 3: Font styles

Table of Contents

In CSS, there are two types of font family names:

Generic family - a group of font families with a similar look (like "Serif" or "Monospace")
Font family - a specific font family (like "Verdana" or "Arial")

The font-family property holds several font names as a fallback system.
If the browser does not support the first font, it tries the next font.

Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".

Example:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Verdana", serif;}

In the above example, headlines marked with <h1> will be displayed using the font "Arial".
If this font is unavailable, "Verdana" will be used instead.
If both are unavailable, a font from the sans-serif family will be used to show the headlines.

Some of the possible values for font attributes in CSS:

Property	Values	Example
font-family	font name, generic font-family	font-family:Serif font-family:Verdana, Serif
font-style	normal italic oblique	font-style:italic font-style:oblique
font-variant	normal small-caps	font-variant:small-caps
font-weight	normal bold bolder lighter a number between 100-900	font-weight:bold font-weight:bolder font-weight:lighter font-weight:200 font-weight:800
font-size	normal length in px (Example: 16px) length in pt (Example: 16pt) xx-small x-small small medium large x-large xx-large smaller larger percentage (from 0 to 100)	font-size:20px font-size:20pt font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-size:80%

Difference Between Serif, Non-serif and Monospace Fonts

Serif fonts have rounded edges and are considered easier to read than non-serif ones for computer screens.
Monospace fonts have same width for all characters.
Example:

Serif fonts: Times New Roman, Georgia
Non-serif: Arial, Verdana
Monospace: Courier New, Lucida Console

Text attributes

Apart from the font style, there is another class of styles which provide text-effects. Some of them are as follows:

Text attributes:

Property	Values	Example
line-height	normal number length percentage	line-height:0.8 line-height:0.8 line-height:30px line-height:30px line-height:200% line-height:200%
text-decoration	none underline overline line-through blink	text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink
text-transform	none capitalize uppercase lowercase	text-transform:capitalize text-transform:uppercase text-transform:lowercase
text-align	left right center justify	text-align:left text-align:right text-align:center text-align:justify
text-indent	length percentage	text-indent:40px text-indent:10%
white-space	normal pre	white-space:pre (keeps spaces as such)
inter-letter spaces	letter-spacing:5px word-spacing:20px	Letter spacing applied here Word spacing applied on this text
Other styles	text-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <color>	text-shadow:2px 2px 6px blue

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal