Make delicious recipes!

Chapter 3: Font styles



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