CSS Typography Reference Sheet – Get Creative with your Headlines!

October 6, 2008 - 26 Comments
Cheat Sheets, Popular, Typography

This Reference Sheet was created to emphasize the many options available within CSS, particularly for Typography.
So, what are you waiting for, get creative with your headlines!

The page is split into three: CSS Typography Property Table, Web Safe Fonts Table and CSS Typography Value Conversion Table.

Hope this helps.

You can download this Reference Sheet in the following formats: PNG or PDF.

CSS Typography Property Table

CSS Property	Value	Value Options
font	font-style	inhertit normal italic oblique
	font-variant	inhertit normal small caps
	font-weight	100,200,300,400,500,600,700,800,900 (thin to thick characters) bold, bolder lighter, normal
	font-size	View px/em/%/keyword table.
	font-family	View Web Safe Font Table
	font-size-adjust	inherit none
	font-stretch	ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded
text	text-align	left right center inherit justify
	text-decoration	blink inherit line-through none overline underline
	text-indent	inherit
	text-shadow	select color none inherit
	text-transform	none uppercase lowercase inherit capitalize
	letter-spacing	inherit normal +(1px,2px,3px…) -(1px,2px,3px…)
	direction	ltr (left) rtr (right)
	line-height	normal number length %
	white-space	normal pre nowrap
	word-spacing	normal length

Web Safe Fonts Table

font-family: Arial, Arial, Helvetica, sans-serif

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

font-family: Arial Black, Arial Black, sans-serif

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

font-family: Comic Sans MS, Comic Sans MS, cursive

font-family: Courier New, Courier New, Courier6, monospace

font-family: Georgia, serif

font-family: Impact, sans-serif

font-family: Lucida Console, monospace

font-family: Lucida Sans Unicode, Lucida Grande, sans-serif

font-family: Tahoma, Geneva, sans-serif

font-family: Times New Roman, Times, serif

font-family: Trebuchet MS, Helvetica, sans-serif

font-family: Verdana, Verdana, Geneva, sans-serif

font-family: MS Sans Serif, Geneva, sans-serif

font-family: MS Serif, New York, serif

CSS Typography Value Conversion Table

Keyword	Pixel (px)	Points (pt)	Percentage (%)	EMs
xx-small	9px	7pt	55%	0.55em
x-small	10px	7.5pt	62.5%	0.625em
n/a	11px	8pt	70%	0.7em
n/a	12px	9pt	75%	0.7.5em
small	13px	10pt	80%	0.8em
n/a	14px	10.5pt	87.5%	0.875em
n/a	15px	11pt	95%	0.95em
medium	16px	12pt	100%	1em
n/a	17px	13pt	105%	1.05em
n/a	18px	13.5pt	112.5%	1.125em
large	19px	14pt	120%	1.2em
n/a	20px	14.5pt	125%	1.25em
x-large	24px	18pt	150%	1.5em
xx-large	42px	32pt	255%	2.55em

Subscribe via RSS or Follow us on Twitter

Share This Post

There are 14 Comments › Leave your comment

Carrie Drazin
7 Oct, 2008

Thank you!

Reply
hamutal
7 Oct, 2008

this is wonderful!!

more! more!

Reply
Brian Hoff
7 Oct, 2008

Great list, much appreciated!

Reply
Brooke
8 Oct, 2008

love this article, love your site, but your sidebar ads are driving me crazy. they cover some of your content in FF
http://img.skitch.com/20081008-pittbakp7e5cxiwn87k9sesffj.jpg

Reply
Nathan Beck
8 Oct, 2008

Fantastic resource. Has been bookmarked and emailed around the office, thank you!

Reply
edu
10 Oct, 2008

awesome, thanks! All of your articles are such a great resource, but this one is up there at the top.

Reply
Designer
12 Oct, 2008

OMG…… this article is so very useful… thanks a ton guys

Reply
BojanP
12 Oct, 2008

Interesting. But not very crossplatform. I would say that not every Mac or Linux box has all of the mentioned fonts.

Reply
Jack Ferguson
14 Oct, 2008

Very nice – thanks!

Reply
D
16 Oct, 2008

Good article, but most web designers/coders should know the majority of this already.

Reply
Nicolas
24 Oct, 2008

Do you have a version without grey background? I don’t have that much ink to waste.

Reply
Kayla
19 Dec, 2008

Wow, thanks!

I’m going to save so much time on my stylesheets…

Reply
Paddy Noob
26 Jan, 2009

Just for the sake of poor newbies using this, please insert the missing hyphen in “small-caps.” I am learning CSS and it took me 15 minutes of messing around to figure out it doesn’t work as “small caps,” only as “small-caps” for font-variant. Now i feel silly, but thanks so much anyhow for the helpful list

Reply
Fabio Alexis
27 Dec, 2009

Thank`s for your job. This reference is very important for us designers.

Reply