CSS Typography Reference Sheet – Get Creative with your Headlines!

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

Join 38,000 of our readers, by following us via our RSS Feed, on Twitter, on Facebook or on Digg

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

17 Comments › Leave yours

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
Shellie Z
12 Feb, 2010
Your PDF is not helpful. It’s all fitting on one page, making it too small to use or read. I’d love to have it at regular print size because I think it’s a very helpful reference guide!
Reply
Marico
6 Jul, 2010
Please correct all the “inhertit” to INHERIT :)
Reply
Iwan
23 Jul, 2010
Good article!
A bit misspelling (inherit – not inhertit).
and why I can’t see how font-stretch looks like?
Reply