• RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!


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

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: Courier New, Courier New, Courier6, monospace

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: Georgia, 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: Impact, 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: Lucida Console, monospace

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: Lucida Sans Unicode, Lucida Grande, 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: Tahoma, Geneva, 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: Times New Roman, Times, 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: Trebuchet MS, 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: Verdana, Verdana, Geneva, 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: MS Sans Serif, Geneva, 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: MS Serif, New York, 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

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
Follow us via RSS Follow us via RSS Email Follow us On Twitter
Share This Post
  • RSS
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • co.mments
  • YahooMyWeb
  • E-mail this story to a friend!
There are 14 Comments › Leave your comment
  1. Carrie Drazin
    7 Oct, 2008

    Thank you!

    Reply

  2. hamutal
    7 Oct, 2008

    this is wonderful!!

    more! more!

    Reply

  3. Brian Hoff
    7 Oct, 2008

    Great list, much appreciated!

    Reply

  4. 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

  5. Nathan Beck
    8 Oct, 2008

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

    Reply

  6. 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

  7. Designer
    12 Oct, 2008

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

    Reply

  8. 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

  9. Jack Ferguson
    14 Oct, 2008

    Very nice – thanks!

    Reply

  10. D
    16 Oct, 2008

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

    Reply

  11. Nicolas
    24 Oct, 2008

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

    Reply

  12. Kayla
    19 Dec, 2008

    Wow, thanks!

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

    Reply

  13. 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

  14. Fabio Alexis
    27 Dec, 2009

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

    Reply