Currently Reading: CSS Typography Reference Sheet - Get Creative with your Headlines!

CSS Typography Reference Sheet - Get Creative with your Headlines!
October 6, 2008 - Categories: Cheat Sheets, Typography.
  • StumbleUpon
  • del.icio.us
  • Mixx
  • Google
  • Facebook
  • blogmarks
  • description
  • E-mail this story to a friend!
  • Furl
  • Ma.gnolia
  • Netvouz
  • Reddit
  • Spurl
  • Technorati
  • Live


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
  • StumbleUpon
  • del.icio.us
  • Mixx
  • Google
  • Facebook
  • blogmarks
  • description
  • E-mail this story to a friend!
  • Furl
  • Ma.gnolia
  • Netvouz
  • Reddit
  • Spurl
  • Technorati
  • Live

Leave your Comment here

Name (required)

Email (required)

Website

Write your comment below.

20 Comments so far

  1. Carrie Drazin on October 7, 2008 1:54 am

    Thank you!

  2. hamutal on October 7, 2008 3:10 am

    this is wonderful!!

    more! more!

  3. Brian Hoff on October 7, 2008 6:06 pm

    Great list, much appreciated!

  4. Brooke on October 8, 2008 11:05 am

    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

  5. Nathan Beck on October 8, 2008 11:41 pm

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

  6. edu on October 10, 2008 11:15 am

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

  7. Designer on October 12, 2008 8:57 am

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

  8. BojanP on October 12, 2008 12:49 pm

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

  9. Jack Ferguson on October 14, 2008 6:42 am

    Very nice - thanks!

  10. D on October 16, 2008 10:28 am

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

  11. Nicolas on October 24, 2008 10:32 am

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

  12. Kayla on December 19, 2008 11:38 am

    Wow, thanks!

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