updated: June 13th, 2011 / Ross Johnson / 198 Comments

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

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

 

 

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.

 

 

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.

 

 

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

 

 

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.


 

 

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”

 

 

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

 

 

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

 

 

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

 

 

 

“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

 

 

 

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.

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

  1. Pingback: Typographie web : quelques codes CSS - Chroniques du web

  2. Pingback: Pages tagged "supportive"

  3. Pingback: links for 2008-06-04 - Chroniques du web

  4. Pingback: 10 ejemplos de bellas tipografía con CSS y sus códigos » Cosas sencillas

  5. Pingback: nerdd.net | news and opinion

  6. Pingback: 10 Examples of Beautiful CSS Typography and how they did it… | BradStrickland.com

  7. Pingback: Tipografía CSS — Tablosign

  8. Pingback:  by Thunder-Boy

  9. Pingback: » 10 Examples of Beautiful CSS Typography and how they did it Webcreatives

  10. Pingback: Internet Brain » 10 Examples of Beautiful CSS Typography and how they did it

  11. Pingback: Ethan’s Blog » Blog Archive » Decisions + Some Web Stuff

  12. Pingback: links for 2008-06-05 | JeremiahTolbert.com

  13. Pingback: 10 encabezados hermosos con CSS | Uberbloggerz

  14. Pingback: rascunho » Blog Archive » links for 2008-06-05

  15. Pingback: Dar bonitos estilos a nuestras tipografías mediante CSS « Xyberneticos

  16. Pingback: Great Resources Elsewhere: May 26 to June 02 - CSSnewbie

  17. Pingback: Getting your onscreen type just right. | Curious Office

  18. Pingback: chrism.us » just had to bookmark these

  19. Pingback: En el tintero – Vol.2 | ZaRQuN.com

  20. Pingback: Sunday Type: typesetting type | i love typography, the typography blog

  21. Pingback: Fatih Hayrioğlu'nun not defteri » 09 Haziran 2008 web’den seçme haberler » Html, nasıl, kodlanır, Bağlantı, Sitelerde, çok, kullanıyoruz, Buda, bazı, yavaşlamalar

  22. Pingback: RANDPOP | Schöne Typographie mit CSS

  23. Pingback: CSS Dev Kit » » Beautiful CSS Typography and How They Did It

  24. Pingback: Blog-Her » Bookmarks for June 9th

  25. Pingback: CSS fixin’: toward a vertical grid (Jarrett House North)

  26. Pingback: Conseguir buenas tipografías mediante CSS | Isopixel

  27. Pingback: » Together - Soho Notes: 1 - 0 - sugarenia.com : Web Standards, Accessibility & other Girly Stuff

  28. Pingback: Chris Carlson » links for 2008-06-14

  29. Pingback: Le blog de Vincent Battaglia » En vrak - 79

  30. Pingback: Bookmarks For Last Week

  31. Pingback: 10 ejemplos de bonitas tipografías mediante CSS en Blog de Estrategias Móviles

  32. Pingback: Max Design - standards based web design, development and training » Some links for light reading (18/6/08)

  33. Pingback: teh secs >> blog » Blog Archive » Stupid things to do

  34. Pingback: Diez estilos de Tipografia en CSS :

  35. Pingback: Paper Bits – links for 2008-06-05

  36. Pingback: June’s Best: This Month in Web Design | Vandelay Website Design

  37. Pingback: 10 Examples of Beautiful CSS Typography and how they did it… | kotahi.net - technology news

  38. Pingback: June’s Best: This Month in Web Design | .:: ju ::.

  39. Pingback: June’s Best: This Month in Web Design | .:: ju ::.

  40. Pingback: 10 MELHORES TIPOGRAFIAS EM CSS « Vítor Imenes

  41. Pingback: 10 Ejemplos de diseño tipográfico y CSS en Huasonic

  42. Pingback: Getting Started With CSS: 20 Awesome Introductory Tuts

  43. Pingback: css 0 0

  44. Pingback: More webdesign stuff | We Design It

  45. Pingback: ifrs

  46. Pingback: Digilicious, Blog de diseño | Diseñando sitios que aparecen en Google

  47. Pingback: links for 2008-7-21 | Anidan Design : eco-friendly web & graphic design

  48. Pingback: Design Inspirations for July 22nd | isuckatdesign.com

  49. Pingback: links for 2008-7-22 | Anidan Design : eco-friendly web & graphic design

  50. Pingback: Thnk » Blog Archive » 10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog

  51. Pingback: Enlaces de utilidad sobre CSS :

  52. Pingback: 50+ Articles to Make You a Better Web Designer | DesignM.ag

  53. Pingback: 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net

  54. Pingback: 50+ Articles to Make You a Better Web Designer | Net Feast

  55. Pingback: CSS Typographie - ben

  56. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices

  57. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices | POLPDESIGN

  58. Pingback: CSS Typography: Contrast Techniques, Tutorials and Best Practices | POLPDESIGN

  59. Pingback: Talking Typography Part 2 : Good Type Gone Bad, Tutorials and Tools | Arbenting

  60. Pingback: WordPress Websites » CSS Typography: Contrast Techniques, Tutorials and Best Practices

  61. Pingback: baroquedub » Blog Archive » Fonts and typography aggregator

  62. Pingback: 10 Examples of Beautiful Typography and How They Did It

  63. Pingback: Hablemos de tipografías, tutoriales y herramientas - Maestros del Web

  64. Pingback: タイトル・見出しに使えるデザインまとめ - DesignWalker

  65. Pingback: Hablemos de tipografías, tutoriales y herramientas

  66. Pingback: COFFEE CUP||咖啡杯 » 开始学习CSS:20个循序渐进的教程及资源

  67. Pingback: CSS Typography | Mekuno

  68. Pingback: Links for 12th November 2008 | Velcro City Tourist Board

  69. Pingback: AaronRutledge.com

  70. Pingback: A new bookmark… | Mekuno

  71. Pingback: Estilos a Tipografias mediante CSS at Blog Borchani Studios

  72. Pingback: links for November 13th through November 15th | Jared Silfies

  73. Pingback: Selección de diferentes diseños del aspecto de los titulares o cabezeras | Cosas sencillas

  74. Pingback: 101 Useful Web Developer and Web Designer Links | Website Builders Resource

  75. Pingback: links for 2008-12-13 : rasheqrahman.com

  76. Pingback: Review: Mac information managers

  77. Pingback: Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber

  78. Pingback: Que hacer para indexar en Google | Adventure Graphics

  79. Pingback: 10 Examples of Beautiful CSS Typography | SIOSISM

  80. Pingback: 50 Useful Design Tools For Beautiful Web Typography | CSS, Fonts | Smashing Magazine

  81. Pingback: ArticleSave :: Uncategorized :: 50 Useful Design Tools For Beautiful Web Typography

  82. Pingback: 50 Useful Design Tools For Beautiful Web Typography - All web resource stuff

  83. Pingback: 8 Examples of Beautiful CSS Typography and how they did it… | i386.pub.ro

  84. Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  85. Pingback: Elsewhere, on 2009-01-31 - Once a nomad, always a nomad

  86. Pingback: 50 Useful Design Tools For Beautiful Web Typography | Lifeonthecouch.com

  87. Pingback: Torunn[.net] » CSS typografi

  88. Pingback: Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği | Atkn Klkn'ın not defteri

  89. Pingback: Links for 2009-02-08 [del.icio.us] - everyday

  90. Pingback: Typography Toolbox

  91. Pingback: CSS Typography « Pixelerium

  92. Pingback: » Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği Duymadim.com: Bunudamı duymadın? Araç Bilgisayar Bilim Donanım Fragmanlar Genel Komedi Magazin Müzik Mobil Oyunlar Son Dakika Spor Teknoloji Uzay Video Yazılım İnternet

  93. Pingback: medecau

  94. Pingback: 50 Useful Design Tools For Beautiful Web Typography | Ramblings

  95. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | Web Design Ledger

  96. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | Blog YODspica Ltd

  97. Pingback: 12 tools en tutorials voor prachtige Typografie te bekomen |

  98. Pingback: 12 tools en tutorials voor prachtige Typografie te bekomen |

  99. Pingback: 12 CSS Tools and Tutorials for Beautiful Web Typography | myBlog

  100. Pingback: Ultimate Resource for WebDevs & Designers « Dzign Magazine

  101. Pingback: Web Typography - Techgeist

  102. Pingback: Web Designer Notebook » Adding Style with CSS: Beautiful Type

  103. Pingback: 10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog | Squico

  104. Pingback: Wayne State Web Communications Blog » Blog Archive » [Friday Links] The 2009 edition

  105. Pingback: Web Typography At Its Best Part Two

  106. Pingback: Curso Intensivo Web » Blog Archive » Tipografia+CSS

  107. Pingback: Toad Blog: Thoughts on Web Design » Blog Archive » DESIGN: What the Font?

Comments are closed.