Lately I have been very interested in how far we can take Typography only using CSS. Sure you can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites— especially ones driven by a CMS.

Think about how difficult sIFR or images get when you want to replicate that typography or typeface over 100 pages powered by a CMS. If you can get beautiful type via CSS it makes this situation very easy and with out compromise.

There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type? NOTE: Do not simply steal the design/code/style listed here, learn from it. I have seen a few sites that have ripped off the design elements of these sites and it is awful.

1. Coudal Partners

Coudal Partners

small headline Larger Headline

Small headline font-family: Gill Sans, Verdana; font-size: 11px; line-height: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: bold; Large Headline font-family: times, Times New Roman, times-roman, georgia, serif; color: #444; margin: 0; padding: 0px 0px 6px 0px; font-size: 51px; line-height: 44px; letter-spacing: -2px; font-weight: bold; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Small headline font - family : Gill Sans , Verdana ; font - size : 11px ; line - height : 14px ; text - transform : uppercase ; letter - spacing : 2px ; font - weight : bold ; Large Headline font - family : times , Times New Roman , times - roman , georgia , serif ; color : #444; margin : 0 ; padding : 0px 0px 6px 0px ; font - size : 51px ; line - height : 44px ; letter - spacing : - 2px ; font - weight : bold ;

You may be surprised to find out that the serif font used is… *gasp* times new roman! Using a large bold version with negative letter-spacing (-2px) the nuances of the font really create some unique whitespace and relationship with each other. Not using a solid black creates a very elegant look and feel.

The smaller headlines above it are all caps with a moderate letter-spacing (2pixels) and are either gill sans or verdana. Very clean screen san-serif fonts. The close proximity of the two different typefaces and the tension between the moderate letter-spacing and the negative letter-spacing creates a very beautiful typography composition. The tight line height (44px for a 51px font) create close interaction between the ascenders and descenders of the type.

2 + 3. Human Sexuality and the Nuptial Mystery

Human Sexuality and the Nuptial Mystery

Headline Example Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

HEADLINE font-family:Georgia,serif; color:#4E443C; font-variant: small-caps; text-transform: none; font-weight: 100; margin-bottom: 0; PARAGRAPH font-family: "Helvetica Neue", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif; font-size: 14px; margin-top: .5em; color: #666; PARAGRAPH START font-family:Georgia,serif; font-size: .8em; font-weight: bold; text-transform:uppercase; letter-spacing:2px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 HEADLINE font - family : Georgia , serif ; color : #4E443C; font - variant : small - caps ; text - transform : none ; font - weight : 100 ; margin - bottom : 0 ; PARAGRAPH font - family : "Helvetica Neue" , "Lucida Grande" , Helvetica , Arial , Verdana , sans - serif ; font - size : 14px ; margin - top : . 5em ; color : #666; PARAGRAPH START font - family : Georgia , serif ; font - size : . 8em ; font - weight : bold ; text - transform : uppercase ; letter - spacing : 2px ;

This site has two areas where there is some really beautiful css typography. The start of paragraphs they use a unique mixture of all caps and moderate letter-spaced type in conjunction with clean easy to read san-serif fonts. Using a tiny bit of margin tweaking they were able to make the serif and san serif fonts flow together perfectly. Additional for headlines they use small-caps font variant with georgia to create a very unique and beautiful headline.

3. Seed Conference

Seed Conference

On Friday, June the 6th 2008 Learn about taking control of your own work Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Middle Headline font-family: times, Times New Roman, times-roman, georgia, serif; font-size: 28px; line-height: 40px; letter-spacing: -1px;color: #444; Paragraph Text font-family: times, Times New Roman, times-roman, georgia, serif; font-size: 14px; line-height: 20px; text-transform: uppercase; color: #444; Large Headline font-family: times, Times New Roman, times-roman, georgia, serif; font-size: 48px; line-height: 40px; letter-spacing: -1px; color: #444; margin: 0 0 0 0; padding: 0 0 0 0; font-weight: 100; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Middle Headline font - family : times , Times New Roman , times - roman , georgia , serif ; font - size : 28px ; line - height : 40px ; letter - spacing : - 1px ; color : #444; Paragraph Text font - family : times , Times New Roman , times - roman , georgia , serif ; font - size : 14px ; line - height : 20px ; text - transform : uppercase ; color : #444; Large Headline font - family : times , Times New Roman , times - roman , georgia , serif ; font - size : 48px ; line - height : 40px ; letter - spacing : - 1px ; color : #444; margin : 0 0 0 0 ; padding : 0 0 0 0 ; font - weight : 100 ;

Our friends at Coudal partners are back to show us there is more than one way to make times beautiful. Again they are mixing large type with negative letter-spacing to get some beautiful interaction between the different shapes of the letter forms. Using a nice typography baseline the different sizes and typographic styles all keep the same rhythm. The contrast and tension between larger type, italics, and all caps creates a very interest typographic composition.

4. Twisted Intellect

Twisted Intellect

There used to be a blog around these parts of the intertubes. And t’was glorious — full of mindless blabber about Apple, Design, Typography, CSS, web design & the like… I like the term ‘Mac-man’. I think I’ll make that my official work title… about an hour ago

PARAGRAPH CODE p:first-letter{ text-transform: uppercase; } p { color: #424242; font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; letter-spacing:0.1em; text-align:center; margin: 40px auto; text-transform: lowercase; line-height: 145%; font-size: 14pt; font-variant: small-caps; } TWITTER HEADLINE font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif; font-style: italic; color: #424242;} a { font-style: normal; font-variant: small-caps; text-decoration: none; color: #afafaf; font-size: 14px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 PARAGRAPH CODE p : first - letter { text - transform : uppercase ; } p { color : #424242; font - family : "Adobe Caslon Pro" , "Hoefler Text" , Georgia , Garamond , Times , serif ; letter - spacing : 0.1em ; text - align : center ; margin : 40px auto ; text - transform : lowercase ; line - height : 145 % ; font - size : 14pt ; font - variant : small - caps ; } TWITTER HEADLINE font - family : "Adobe Caslon Pro" , "Hoefler Text" , Georgia , Garamond , Times , serif ; font - style : italic ; color : #424242;} a { font - style : normal ; font - variant : small - caps ; text - decoration : none ; color : #afafaf; font - size : 14px ; }

In this composition we see some daring use of a completely non-standard font, Adobe Caslon. Since the site is most likely going to be viewed by other designers, it is not an unsafe bet that majority of them will have this popular Adobe font (as it comes in all the CS3 suites). If the font isn’t available it falls back to pretty standard serif fonts. The subtle enhancements are what makes this composition so interesting. The use of the css psuedo selector first-letter to only cap the first letter, well thought out spacing, and small caps really make the first paragraph interesting.

In the composition below, the contrast of italics and all caps with different values of gray really create a visually interesting an elegant look.

5. Airbag Industries

Airbag Industries

Headline I just came across a link to a store where a two-terabyte drive can be purchased for the price of an iPod. Two. Terabytes. !@#$% What the hell?! Arrrrgggg. Wait, uh, let me get into character here…cinch the pants up a few inches—yes, good—put on some flannel, and hunch over…all set.



HEADLINE font-family: Georgia,"Times New Roman",serif; font-size: 12px; font-weight: bold; color: #600; line-height: 22px; margin: 0; text-transform: uppercase; letter-spacing: 1px DATE font-family: Georgia,"Times New Roman",serif; font-size: 10px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 HEADLINE font - family : Georgia , "Times New Roman" , serif ; font - size : 12px ; font - weight : bold ; color : #600; line - height : 22px ; margin : 0 ; text - transform : uppercase ; letter - spacing : 1px DATE font - family : Georgia , "Times New Roman" , serif ; font - size : 10px ; line - height : 22px ; text - transform : uppercase ; letter - spacing : 2px ;

Airbag Industries does a great job of using very slight letterspacing to give the smaller headlines and dates just a little more breathing room. Any more and it might destroy the surfboard look that the site does so well, and any less and it wouldn’t retain the grid like feel of the entire site. By switching up the weight of the fonts and the colors it creates slightly more contrast. You might almost miss how much thought was put into these headlines, almost a “It looks good but I don’t know why” sort of feeling.

6. Timoni

Timoni

March 28, 2008 Notes on “An Insurgence of Quality”

DATE font-size: 12px; font-family: Georgia, 'Times New Roman', serif; color: #000; text-align: center; font-weight: 100; } PARAGRAPH BLOCK font-family: 'Hoefler Text', Georgia, 'Times New Roman', serif; font-weight: normal; font-size: 1.75em; letter-spacing: .2em; line-height: 1.1em; margin:0px; text-align: center; text-transform: uppercase; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 DATE font - size : 12px ; font - family : Georgia , 'Times New Roman' , serif ; color : #000; text - align : center ; font - weight : 100 ; } PARAGRAPH BLOCK font - family : 'Hoefler Text' , Georgia , 'Times New Roman' , serif ; font - weight : normal ; font - size : 1.75em ; letter - spacing : . 2em ; line - height : 1.1em ; margin : 0px ; text - align : center ; text - transform : uppercase ;

Timoni is another interesting site that pays very close attention to the margins and line heights of all the type on the page. Using moderate letter spacing and almost as much space between the lines, a feeling of formality is archived. Where the same fundamentals of type (letterspacing and contrast) created a less formal look/feel on Airbag Industries, this designer used more space to shift the whole composition.

7. Sroown

Sroown

Title of Headline Some supportive text Sub Line

Description and Content Sub Line

Description and Content Address

www.address.com

PARAGRAPH margin: 0px; padding: 0px; font-size: 11px; color: #fff; clear: both; padding-bottom: 6px; GRAY PARAGRAPH display: block; color: #666; font-size: 9px; padding-top: 5px; HEADLINE margin: 0px; padding: 0px; display: block; font-weight: normal; font-family: Arial, Helvetica, sans-serif; font-size: 28px; letter-spacing: -1px; color: #fff; line-height: 24px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 PARAGRAPH margin : 0px ; padding : 0px ; font - size : 11px ; color : #fff; clear : both ; padding - bottom : 6px ; GRAY PARAGRAPH display : block ; color : #666; font - size : 9px ; padding - top : 5px ; HEADLINE margin : 0px ; padding : 0px ; display : block ; font - weight : normal ; font - family : Arial , Helvetica , sans - serif ; font - size : 28px ; letter - spacing : - 1px ; color : #fff; line - height : 24px ;

Sroown takes an approach not yet seen in these examples. Using a standard san-serif font, Arial, and applying some negative letter spacing to make it look thin and elegant. At first glance of the site I hardly recognized the typeface, and figured the designer was using sIFR. Using tight line heights the headline is uniform and balanced. The support copy simply follows a simple baseline and stays out of the way of more interesting type of the page.

8. I love Typography

I love typography

Sunday Type: Ale Paul type In the Beginning

HEADLINE font-family: Georgia, "Times New Roman", Times, serif; font-size:24px; margin-top: 5px; margin-bottom: 0px; text-align: center; font-weight: normal; color: #222; SUBHEADLINE font-family: "Lucida Grande", Tahoma; font-size: 10px; font-weight: lighter; font-variant: normal; text-transform: uppercase; color: #666666; margin-top: 10px; text-align: center!important; letter-spacing: 0.3em; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 HEADLINE font - family : Georgia , "Times New Roman" , Times , serif ; font - size : 24px ; margin - top : 5px ; margin - bottom : 0px ; text - align : center ; font - weight : normal ; color : #222; SUBHEADLINE font - family : "Lucida Grande" , Tahoma ; font - size : 10px ; font - weight : lighter ; font - variant : normal ; text - transform : uppercase ; color : #666666; margin - top : 10px ; text - align : center ! important ; letter - spacing : 0.3em ;

“I love typography” proves that the site owner is not kidding with some beautiful headlines (and beautiful CSS type all over the site). In the case of the headlines, the real interesting and elegant CSS typography is the subheadline. Contrasting Georgia with Lucida Sans, a very clean san-serif font (especially when it is all caps) is a subtle way to display class through type. The generous letter spacing really emphasizes each and every form of the sub headline, creating both visual interest and visual communication.

9. The Big Noob

The Big Noob

May 8, 2008 HOW Now Conference Cow HOW you get to Boston is up to you. WHO and WHAT you do while here — that is the question.

DATE font-size: 85%; text-transform: uppercase; letter-spacing: 1px; color: #bbb; font-size: 10px; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-weight: 100; HEADLINE font: bold 34px "Century Schoolbook", Georgia, Times, serif; color: #333; line-height: 90%; margin: .2em 0 .4em 0; letter-spacing: -2px; TAG color: #76879b; font-size: 10px; margin: 5px; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 11px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 DATE font - size : 85 % ; text - transform : uppercase ; letter - spacing : 1px ; color : #bbb; font - size : 10px ; font - family : "Lucida Grande" , Verdana , Helvetica , Arial , sans - serif ; font - weight : 100 ; HEADLINE font : bold 34px "Century Schoolbook" , Georgia , Times , serif ; color : #333; line - height : 90 % ; margin : . 2em 0 . 4em 0 ; letter - spacing : - 2px ; TAG color : #76879b; font - size : 10px ; margin : 5px ; font - family : "Lucida Grande" , Verdana , Helvetica , Arial , sans - serif ; font - size : 11px ;

“The Big Noob” is no noob when it comes to typography… OK bad jokes aside, here is another great example of contrasting ultra clean, small, generously letter-spaced san-serif fonts, with tighter and larger serif fonts for headlines. In this case the designer applied ample letter-spacing to the date of the headline, negative letter spacing to the headline, and left the snippet from the post in the middle. Because of the alteration of color, whitespace, and font size the whole composition ends up very balanced and visually stimulating.

10. Quipsologies

Quipsologies

QUIPSOLOGIES, A DIVISION OF UNDERCONSIDERATION,

IS BENT ON KEEPING THE DESIGN COMMUNITY

AWARE OF AS MANY THINGS AS POSSIBLE

THROUGH AN EVER-GROWING CLUSTER OF CREATIVE

MORSELS FOUND ON- AND OFF-LINE. No. 4 “Dr. Fredric J. Baur was so proud of having designed the container for Pringles potato crisps that he asked his family to bury him in one.” Enough said. [Via Unbeige] QUIPPED BY ArminJun.02.2008

HEADLINES font-family:georgia, serif; color:#381704; font-size:10px; letter-spacing:0.1em; line-height:200%; padding-top:11px; NUMBER font-family:georgia, serif; color:#3B200F; font-size:16px; font-weight:bold; line-height:125%; text-align:center; QUIPPED SECTION font-family:georgia, serif; color:#786E69; font-size:10px; font-weight:bold; letter-spacing:.1em; text-transform:uppercase; padding-bottom:3px; font-family:georgia, serif; color:#786E69; font-size:10px; font-weight:bold; font-style:italic; letter-spacing:.1em; padding-bottom:35px; PARAGRAPH font-family:georgia,serif; color:#381704; font-size:12px; font-weight:normal; line-height:150%; padding:0px; 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 HEADLINES font - family : georgia , serif ; color : #381704; font - size : 10px ; letter - spacing : 0.1em ; line - height : 200 % ; padding - top : 11px ; NUMBER font - family : georgia , serif ; color : #3B200F; font - size : 16px ; font - weight : bold ; line - height : 125 % ; text - align : center ; QUIPPED SECTION font - family : georgia , serif ; color : #786E69; font - size : 10px ; font - weight : bold ; letter - spacing : . 1em ; text - transform : uppercase ; padding - bottom : 3px ; font - family : georgia , serif ; color : #786E69; font - size : 10px ; font - weight : bold ; font - style : italic ; letter - spacing : . 1em ; padding - bottom : 35px ; PARAGRAPH font - family : georgia , serif ; color : #381704; font - size : 12px ; font - weight : normal ; line - height : 150 % ; padding : 0px ;

Quipsologies finds new and interesting ways to use type all over their site. The great thing is, they stick to one typeface yet make it work for so many different situations. The headline section has ample use of letter-spacing in conjunction with a very wide line-height (200%!). The smaller sized all caps make it easy to read and engaging.

The bolder and larger numbers on the site stick out highlighting the items that have been “Quipped,” really pointing you towards the main reason for the sites existence. The headline previous is more of a general description to be read once to understand, then never again.

The copy text is clean and easy to read due to plenty of line height and Georgia as the typeface.

Finally the quipped section is a lighter brown to take the focus and emphasis off of the element, with a contrasted bold / italics and some mild letter-spacing for a tad extra breathing room.

Done!

Those are the examples that I have found around the net. Are there any that I have missed? Remember, use these examples and the code to learn the techniques that these designers have mastered to enhance their work through typography. Do not outright steal any of it. If you fail to understand it I assure you that it will simply look out of place and detract from the design rather than add to it. And there are many great opportunities to use CSS and typography for great visual effects, don’t be so quick to jump to sIFR or images.