10 Examples of Beautiful CSS Typography and how they did it…

June 2, 2008 @ 8:08 pm | Comments (140) | by Ross Johnson

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;

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;

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;

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;
        }

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 04/02/08

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;

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;

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;

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;

“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;

“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;

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.



« Yahoo SearchMonkey… the google killer? Using Color as Communication »

Subscribe

The BasicsAbout

This is the blog of Ross Johnson, a co-owner of a Michigan web site design company, College Instructor, and Publisher.

time testedTop Posts

fresh contentRecent Posts

DesignOOGLE, inspiration by keyword Basecamp