Scribd
Upload
24 views

CSS Fonts: Difference Between Serif and Sans Serif Fonts

The document discusses CSS font properties including font family, style, size, weight, and variant. It defines serif and sans-serif fonts and explains how to set font properties using generic families, specific font families, pixels, and ems. The font properties allow controlling the typeface, boldness, size, and style of text.

Uploaded by

pratik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

CSS Fonts: Difference Between Serif and Sans Serif Fonts

The document discusses CSS font properties including font family, style, size, weight, and variant. It defines serif and sans-serif fonts and explains how to set font properties using generic families, specific font families, pixels, and ems. The font properties allow controlling the typeface, boldness, size, and style of text.

Uploaded by

pratik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

5/24/2016

CSSFonts

CSS Fonts
Previous

NextChapter

TheCSSfontpropertiesdefinethefontfamily,boldness,size,andthestyleofa
text.

Difference Between Serif and Sansserif Fonts

CSS Font Families


InCSS,therearetwotypesoffontfamilynames:
genericfamilyagroupoffontfamilieswithasimilarlook(like"Serif"or
"Monospace")
fontfamilyaspecificfontfamily(like"TimesNewRoman"or"Arial")

Generic
family

Fontfamily

Description

Serif

TimesNew
Roman
Georgia

Seriffontshavesmalllinesattheends
onsomecharacters

Sansserif

Arial

"Sans"meanswithoutthesefontsdo
nothavethelinesattheendsof
1/8

5/24/2016

CSSFonts

Monospace

Verdana

characters

CourierNew
Lucida
Console

Allmonospacecharactershavethe
samewidth

Note:Oncomputerscreens,sansseriffontsareconsideredeasiertoread
thanseriffonts.

Font Family
Thefontfamilyofatextissetwiththe fontfamily property.
The fontfamily propertyshouldholdseveralfontnamesasa"fallback"system.Ifthe
browserdoesnotsupportthefirstfont,ittriesthenextfont,andsoon.
Startwiththefontyouwant,andendwithagenericfamily,toletthebrowserpicka
similarfontinthegenericfamily,ifnootherfontsareavailable.
Note:Ifthenameofafontfamilyismorethanoneword,itmustbeinquotation
marks,like:"TimesNewRoman".
Morethanonefontfamilyisspecifiedinacommaseparatedlist:

Example
p{
fontfamily:"TimesNewRoman",Times,serif;
}
TryitYourself

Forcommonlyusedfontcombinations,lookatourWebSafeFontCombinations.

Font Style
2/8

5/24/2016

CSSFonts

The fontstyle propertyismostlyusedtospecifyitalictext.


Thispropertyhasthreevalues:
normalThetextisshownnormally
italicThetextisshowninitalics
obliqueThetextis"leaning"(obliqueisverysimilartoitalic,butlesssupported)

Example
p.normal{
fontstyle:normal;
}
p.italic{
fontstyle:italic;
}
p.oblique{
fontstyle:oblique;
}
TryitYourself

Font Size
The fontsize propertysetsthesizeofthetext.
Beingabletomanagethetextsizeisimportantinwebdesign.However,youshouldnot
usefontsizeadjustmentstomakeparagraphslooklikeheadings,orheadingslooklike
paragraphs.
AlwaysusetheproperHTMLtags,like<h1><h6>forheadingsand<p>for
paragraphs.
Thefontsizevaluecanbeanabsolute,orrelativesize.
Absolutesize:
3/8

5/24/2016

CSSFonts

Setsthetexttoaspecifiedsize
Doesnotallowausertochangethetextsizeinallbrowsers(badforaccessibility
reasons)
Absolutesizeisusefulwhenthephysicalsizeoftheoutputisknown
Relativesize:
Setsthesizerelativetosurroundingelements
Allowsausertochangethetextsizeinbrowsers

Note:Ifyoudonotspecifyafontsize,thedefaultsizefornormaltext,
likeparagraphs,is16px(16px=1em).

Set Font Size With Pixels


Settingthetextsizewithpixelsgivesyoufullcontroloverthetextsize:

Example
h1{
fontsize:40px;
}
h2{
fontsize:30px;
}
p{
fontsize:14px;
}
TryitYourself

Tip:Ifyouusepixels,youcanstillusethezoomtooltoresizetheentirepage.

Set Font Size With Em


4/8

5/24/2016

CSSFonts

Toallowuserstoresizethetext(inthebrowsermenu),manydevelopersuseem
insteadofpixels.
TheemsizeunitisrecommendedbytheW3C.
1emisequaltothecurrentfontsize.Thedefaulttextsizeinbrowsersis16px.So,the
defaultsizeof1emis16px.
Thesizecanbecalculatedfrompixelstoemusingthisformula:pixels/16=em

Example
h1{
fontsize:2.5em;/*40px/16=2.5em*/
}
h2{
fontsize:1.875em;/*30px/16=1.875em*/
}
p{
fontsize:0.875em;/*14px/16=0.875em*/
}
TryitYourself

Intheexampleabove,thetextsizeinemisthesameasthepreviousexamplein
pixels.However,withtheemsize,itispossibletoadjustthetextsizeinallbrowsers.
Unfortunately,thereisstillaproblemwitholderversionsofIE.Thetextbecomeslarger
thanitshouldwhenmadelarger,andsmallerthanitshouldwhenmadesmaller.

Use a Combination of Percent and Em


Thesolutionthatworksinallbrowsers,istosetadefaultfontsizeinpercentforthe
<body>element:

5/8

5/24/2016

CSSFonts

Example
body{
fontsize:100%;
}
h1{
fontsize:2.5em;
}
h2{
fontsize:1.875em;
}
p{
fontsize:0.875em;
}
TryitYourself

Ourcodenowworksgreat!Itshowsthesametextsizeinallbrowsers,andallowsall
browserstozoomorresizethetext!

Font Weight
The fontweight propertyspecifiestheweightofafont:

Example
p.normal{
fontweight:normal;
}
p.thick{
fontweight:bold;
6/8

5/24/2016

CSSFonts

}
TryitYourself

Font Variant
The fontvariant propertyspecifieswhetherornotatextshouldbedisplayedina
smallcapsfont.
Inasmallcapsfont,alllowercaselettersareconvertedtouppercaseletters.However,
theconverteduppercaselettersappearsinasmallerfontsizethantheoriginal
uppercaselettersinthetext.

Example
p.normal{
fontvariant:normal;
}
p.small{
fontvariant:smallcaps;
}
TryitYourself

More Examples
Allthefontpropertiesinonedeclaration
Thisexampledemonstrateshowtousetheshorthandpropertyforsettingallofthefont
propertiesinonedeclaration.

7/8

5/24/2016

CSSFonts

Test Yourself with Exercises!


Exercise1

Exercise2

Exercise3

Exercise4

Exercise5

All CSS Font Properties


Property

Description

font

Setsallthefontpropertiesinonedeclaration

fontfamily

Specifiesthefontfamilyfortext

fontsize

Specifiesthefontsizeoftext

fontstyle

Specifiesthefontstylefortext

fontvariant

Specifieswhetherornotatextshouldbedisplayedina
smallcapsfont

fontweight

Specifiestheweightofafont

Previous

NextChapter

Copyright19992015byRefsnesData.AllRightsReserved.

8/8

You might also like