CSS Typography Reference Sheet – Get Creative with your Headlines!

October 6, 2008 - 37 CommentsWritten by Paul Andrew

Categories → 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

About the Author: Paul Andrew (830 Articles)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.

Comments and Reactions

Pingback: Hoja de referencia sobre tipografía y sus códigos CSS » Cosas sencillas
Carrie Drazin
Thank you!
hamutal
this is wonderful!!
more! more!
http://www.brianhoff.net/blog Brian Hoff
Great list, much appreciated!
Brooke
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
http://www.redswish.co.uk Nathan Beck
Fantastic resource. Has been bookmarked and emailed around the office, thank you!
Pingback: Przydatności
edu
awesome, thanks! All of your articles are such a great resource, but this one is up there at the top.
Pingback: Hoja de referencia sobre tipografía y sus códigos CSS | Blog Ascariz
http://www.redesignyourbiz.com Designer
OMG…… this article is so very useful… thanks a ton guys
BojanP
Interesting. But not very crossplatform. I would say that not every Mac or Linux box has all of the mentioned fonts.
http://untsystem.unt.edu Jack Ferguson
Very nice – thanks!
D
Good article, but most web designers/coders should know the majority of this already.
Nicolas
Do you have a version without grey background? I don’t have that much ink to waste.
Pingback: CSS Resources | Think Design
Pingback: Best Of Design - October :: Elite By Design
Pingback: Lista de recursos sobre CSS » Cosas sencillas
http://webitect.net Kayla
Wow, thanks!
I’m going to save so much time on my stylesheets…
Paddy Noob
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
Pingback: Resource List: CSS Resources « Vandhematharam
Pingback: Webtint » Typography in CSS2 and CSS3
http://www.fabioalexis.com Fabio Alexis
Thank`s for your job. This reference is very important for us designers.
http://www.shelliezdesign.com Shellie Z
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!
Pingback: Six Super Helpful Typography Cheat Sheets | Resources
Pingback: Pattern Inc » Six Super Helpful Typography Cheat Sheets
Pingback: Six Super Helpful Typography Cheat Sheets » abdie.web.id
Marico
Please correct all the “inhertit” to INHERIT :)
Pingback: Six Super Helpful Typography Cheat Sheets | TikiJon.com
Pingback: Six Super Helpful Typography Cheat Sheets | Focus of Photography
Pingback: Six Super Helpful Typography Cheat Sheets | Focus of Photography
Pingback: Six Super Helpful Typography Cheat Sheets | Afif Fattouh - Web Specialist
http://www.xianworks.net Iwan
Good article!
A bit misspelling (inherit – not inhertit).
and why I can’t see how font-stretch looks like?
Pingback: Daily Digest für September 27th, 2010 — Amys Welt
Pingback: How To Use Typography Effectively in Web Design - Noupe Design Blog
Pingback: Tipografija (CHEAT SHEETS)
Pingback: 6个超级有用的印刷格式设计速查表 | 福州地铁
Pingback: Web Typography Tutorials, Tips and Best Practices | GRAPHIC & WEB DESIGN GUIDE RESOURCE

CSS Typography Reference Sheet – Get Creative with your Headlines!

CSS Typography Property Table

Web Safe Fonts Table

CSS Typography Value Conversion Table

About the Author: Paul Andrew (830 Articles)

Comments and Reactions

Partners

Worthy Links

Pages

Subscribe & Follow

Sponsors