Font Style
Syntax: font-style: normal|italic|oblique|initial|inherit;
Normal
Syntax: font-style: normal;
Some normal text
Italic
Syntax: font-style: italic;
Some italic text
Oblique
Syntax: font-style: oblique;
Some oblique text
Font Variant
Syntax: font-variant: normal|small-caps|initial|inherit;
Normal
Syntax: font-variant: normal;
Some normal text
Small Caps
Syntax: font-variant: small-caps;
some small caps text
Font Weight
Syntax: font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Normal
Syntax: font-weight: normal;
Font weight normal
Bold
Syntax: font-weight: bold;
Font weight bold
Bolder
Syntax: font-weight: bolder;
Font weight bolder
Lighter
Syntax: font-weight: lighter;
Font weight lighter
100
Syntax: font-weight: 100;
Font weight 100
200
Syntax: font-weight: 200;
Font weight 200
300
Syntax: font-weight: 300;
Font weight 300
400
Syntax: font-weight: 400;
Font weight 400
500
Syntax: font-weight: 500;
Font weight 500
600
Syntax: font-weight: 600;
Font weight 600
700
Syntax: font-weight: 700;
Font weight 700
800
Syntax: font-weight: 800;
Font weight 800
900
Syntax: font-weight: 900;
Font weight 900
Font Size
Syntax: font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|%|initial|inherit;
Paragraph text = 18px (100%)
PX
Syntax: font-size: 18px;
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
EM
Syntax: font-size: 3.5em;
3.5em
3em
2.5em
2em
1.5em
1.2em
EM
Syntax: font-size: 350%;
350% or 63px
300% or 54px
250% or 45px
200% or 36px
150% or 27px
120% or 21.6px
Line Height
Syntax: line-height: normal|number|length|initial|inherit;
Line Height Number
Syntax: line-height: 3;
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Line Height Length
Syntax: line-height: 3em;
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Line Height %
Syntax: line-height: 300%;
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Font Family
Syntax: font-family: font (including fall backs and generic family)|initial|inherit;
Arial
Syntax: font-family: ‘Arial’, Helvetica, Arial, Lucida, sans-serif;
Dancing Script
Syntax: font-family: ‘Dancing Script’, cursive;
Arvo
Syntax: font-family: ‘Arvo’, Georgia, ‘Times New Roman’, serif;
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
With font loaded in the module
With font loaded in the module
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
With font loaded in the module
Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec sollicitudin molestie malesuada.
Shorthand
Syntax: font: font-style font-variant font-weight font-size/line-height font-family;
Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.