June 2nd, 2008 / 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

 


        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.

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

  1. Wow. Great post! You just saved me a lot of ‘view source’… 😉 And also, quite a few of the sites I haven’t seen before…

    You’re absolutely right. sIFR is a great tool, but very easily misused – especially considering that CSS really has some great type-grooming abilities (most of which, by the way, sIFR lacks…)

  2. Very cool article. Thanks for this tips !

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

  4. Pingback: Pages tagged "supportive"

  5. Hi,

    Nice examples – gives a new look at headlines and web.
    Your link on Coudal Partners should be http://www.coudal.com/

    /morten

  6. Very cool article, thanks for sharing!

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

  8. Brilliant – some great inspiration there.

  9. Exactly what I need now !
    Thanks a lot for this article.

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

  11. I’ll use “7. Sroown” in the website that i’m doing for the contact section, thanks a lot! :)

    vega
  12. Pingback: nerdd.net | news and opinion

  13. Thanks for the feedback everyone. I hope it is all helpful, as it helped me at one point to have this “Ah Ha!” moment where I realized a lot of people were doing great things in CSS that I knew looked great but I wasn’t sure why…

  14. Good list – however none of these sites really even really even tap the power of CSS and text. Head to webdesignerswall at

    http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/

    and take a look at how easy it is to apply simple effects to your text via your stylesheet.

  15. That is a great tutorial Jason, thanks for the link. Although I think we are talking about two different things. This article was more about elegantly and beautiful type, where WDW was showing some unique graphical effects you can ADD to type. Slightly different…

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

  17. Pingback: Tipografía CSS — Tablosign

  18. Wonderful list, it still amazes me today how willing everyone in our field, web design, graphic design, search marketing is so willing to share information with the community.

    Thanks Alex!

  19. Pingback:  by Thunder-Boy

  20. hey..
    awesome stuff..
    never tot ..html wud be soo gud ..

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

  22. WOW! Great article! I’m really in love with #3 and #6!

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

  24. Thanks for featuring The Consultation on Human Sexuality. Being amongst such fine company makes me blush!

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

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

  27. Pingback: 10 encabezados hermosos con CSS | Uberbloggerz

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

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

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

  31. hey..
    awesome stuff..
    never tot ..html wud be soo gud ..

  32. Beautiful examples, thanks!!!

  33. I regularly dive into the CSS to see how people apply such great typography to their sites so your article is something of a timesaver this lunchtime :) I’m comfortable with vertical rhytm but still wonder at the mysteries / nuances of letter-spacing – this article helps. Thanks Ross.

    Regards, Karl

  34. …just a pity I can’t spell rhythm. lol

  35. Nice list and write up. Thank you for posting it.

    You could have called it “10 Examples of Beautiful Serif CSS Typography and how they did it… ” find another serif example (ALA, UXMAG) and put the one sans-serif example into another, separate list/posting.

    But, I’m not a regular here, so maybe you already have that. If so, kindly disregard this.

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

  37. Thanks for putting this together, I bookmarked for easy reference later.

  38. Great post and I have bookmark this. Thank you very much.

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

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

  41. Good post, the Times New Roman is really good effect…
    Saved in my bookmarks!

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

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

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

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

  46. Great post. This kind of post can help anybody regardless the knowledge. Thanks.

    gika
  47. Aaarrhh…droooll…..

    Great collection. I simply love those typographic styles with ligatures, spaced small-caps and the odd dotted line here and there that date back to the 40’s and 50’s.

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

  49. Thank you for this great post! As a print designer making the transition into web design, it helps so much to take a peak under the hood to see how type is rendered on screen. You’ve made the peaking so much easier. Nice!

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

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

  52. Buen aporte, aplicaré esto a mi blog http://www.inzitan.blogspot.com, gracias.

  53. Great list! – beautiful examples – typography doesn’t always have to be images!

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

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

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

  57. Pingback: Bookmarks For Last Week

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

  59. Amazing article. It is neat to see such beautiful typography that doesn’t rely on anything but good old semantic XHTML and sweet presentational CSS. It will be quick loading, standards compliant, easily updated, and help with search engine optimization.

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

  61. Why are these people not putting quotes around font names which include spaces?

    They’re so brilliant at typography, but they obviously don’t validate…

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

  63. Pingback: Diez estilos de Tipografia en CSS :

  64. thank you…

    very good set and I have examples to select from ..

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

  66. wow, great sets of css style and thank you for having the source code posted. Would be really useful for me.

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

  68. I like the twisted intellect example. It achieves the effect of having the same smoothness that images of text have.

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

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

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

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

  73. A great collection. Thank you. My favourites tend to the more subtle taste, which in my personal opinion is the more difficult end of the scale.

    All are inspiration though, which I presume is the meaning of the post :-)

  74. Inspirational examples indeed Alex. So glad I stumbled upon your site.

    Bookmarked

    Twist

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

  76. HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

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

  78. Pingback: css 0 0

  79. Pingback: More webdesign stuff | We Design It

  80. Very nice, good to see people really using css for typography :)

  81. Thanks for the eye opener,
    CSS before Images – from now on!

    Maébh
  82. Here’s a couple of articles I found useful on the subject:

    http://webtypography.net/toc/
    http://24ways.org/2006/compose-to-a-vertical-rhythm

    I was taken aback by the fact that an article about type on the web has some of the most unreadable text I have come across. In fact I didn’t actually read your article or the comments but did look at the examples. This article sums it up nicely and gives some tips when using light text on a dark background.

    http://www.456bereastreet.com/archive/200608/light_text_on_dark_background_vs_readability/

    Most importantly decrease the contrast (don’t use extreme light on extreme dark) and increase the leading and tracking…

    headache
  83. Interesting piece. Some of the text is pretty unreadable but the side by side ‘output’ with the relevant CSS was worthwhile.

  84. Pingback: ifrs

  85. Thank you! Very useful selection.

  86. Thanks for sharing this inspired tips…

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

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

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

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

  91. I think you guys are easily impressed.

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

  93. Great! I emailed this to a friend who insisted that images were the way to go. Sticklers unite!

  94. Pingback: Enlaces de utilidad sobre CSS :

  95. Inspired me to redo my website, very nice article.

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

  97. Thanks for the fantastic article. I definitely inspired to rethink the use of typography on my site.

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

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

  100. Great article – very useful to see some really good styles in order to get inspiration. I wrote a firefox extension a while ago which lets you select text and gives you all the CSS styling that made it happen – http://bendodson.com/extensions/ – might be of use to some of you!

  101. Pingback: CSS Typographie - ben

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

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

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

  105. Thanks for share. Great tutorial for me !

  106. This is a nice collection of hints. Thanks for the post

    Harsh
  107. Nice collection, it defiantly saved me some time and made a project that i’m doing for school look cool!

    Wyman
  108. That’s exactly what I was looking for!
    Thanks a lot for your time mate!

  109. Brilliant post, I love when people use CSS for good, and create beautiful things instead of a jumbled mess of terrible .style1 tags lol

  110. Oh, this is brilliant.

    I’ve been wanting to explore type in my css for some time but have been unsure where to begin. Seeing the work of experts, grouped together like this, has been a great learning experience.

    Cheers!

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

  112. Muito bom, adorei as tipografias e a forma em que elas se incorporam no texto

    Ricardo Crema
  113. Pingback: WordPress Websites » CSS Typography: Contrast Techniques, Tutorials and Best Practices

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

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

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

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

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

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

  120. Great Blog! SO helpful! your making typography for the web more than verdana

  121. Pingback: CSS Typography | Mekuno

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

  123. Pingback: AaronRutledge.com

  124. Pingback: A new bookmark… | Mekuno

  125. Helvetica is so ugly on firefox for PCs.
    Stop using it on the web… !
    Thanks for your article.
    very interesting however…

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

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

  128. Excellent job!
    I like the large headline on top of page. Thank you for the codes. Very useful.

  129. These examjples really aren’t that great. I think it really proves just how far browsers have to go with typography. As much as I hate IE, IE7 is the only browser that makes type actually legible. When are the other browsers going to catch up?

    Vincent Pollard
  130. Nicely done! You inspired me for my own website. Thanks.

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

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

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

  134. Pingback: Review: Mac information managers

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

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

  137. This is so usefull, thank you, very clean and stylish

  138. That’s perfect summary, very valuable for my next job of doing SEO friendly urls through htaccess. Thank you.

  139. This was extremely helpful for me in designing the typography of my personal page — in particular, the insight that changing the spacing of Times makes it into a whole new font!

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

  141. great examples going use some for my websites

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

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

  144. Love the Coudal Partners example.

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

  146. This is a fabulous resource. Thank you for sharing!

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

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

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

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

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

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

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

  154. Pingback: Typography Toolbox

  155. Pingback: CSS Typography « Pixelerium

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

  157. Great article!
    I’ve added it to the tutorial directory at http://www.TutorialMagazine.com. Contact me at jorgen [at] tutorialmagazine.com if you want your new tutorials to show up there automatically 😀

    Jørgen
    – editor of http://www.TutorialMagazine.com

    Jørgen
  158. Man, I LOVE YOU. Just so you know, I love everything you do.
    THANK YOU. But please open links in a new window?

    Vic
  159. Pingback: medecau

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

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

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

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

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

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

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

  167. Wonderful post. I’m new to using CSS and was wondering how you do the second color (red) on the small header for example one. I’m trying to figure out how to do the same thing but putting in a tag that uses and external style sheet. Thanks!
    Best

    Brian
  168. Nice article and tutorial on CSS. Thanks.

  169. Pingback: Web Typography - Techgeist

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

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

  172. Thanks a lot for this great post, typograpghy can make a lot of difference in the look.

  173. I really hammered typography hard in my latest client website; concentrating on balanced design: http://www.west-test.co.uk/

  174. A simple but very efficient study. It’ll be interesting to do something similar in five years when @font-face has been around a while!

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

  176. I’ll use “7. Sroown” in the website that i’m doing for the contact section, thanks a lot! :)

  177. Thanks for the tips. I’m just writing about why should css code be organized and this post was really helpful.

  178. Pingback: Web Typography At Its Best Part Two

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

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

  181. 10 Examples of Beautiful CSS Typography and how they did it… – http://t.co/BGP1cUQ – @baileyspace

  182. Sin web fonts: 10 Examples of Beautiful CSS Typography and how they did it… http://t.co/fVxAeJWA: Si… http://t.co/a7Rw9Uyb #typogra…

Comments are closed.