Already back in 2006 Alice Rawsthorn was calling Georgia the most fashionable type on the Internet in the style and design section of International Herald Tribune. And it looks like in the past couple years its popularity grew on the Web. Almost every other site we visit is using Georgia in one way or another. Being one of the first typefaces specifically designed for use on screen, Georgia looks great and is legible both in big and small sizes, thanks to a relatively large x-height.

Microsoft has definitely redeemed itself for creating the most horrendous OS and browser in the history of mankind by commissioning Mathew Carter, a British-born type designer, who began by learning to make type before learning to design it, a collection of screen-friendly typefaces, both serif and sans-serif. As sans-serifs typefaces were much more popular in the digital world in 1990s, Carter began with the design of Verdana and later followed it up with the serif, Georgia. However despite its elegance, legibility and gorgeous old-style numerals, it was left in the shadows by Verdana for many years, until the early 2000s when it was re-discovered by graphic designers who were rummaging through vintage styles for their next big look.

Georgia is the most versatile web-safe serif typeface: by combining various styles, sizes, tightening or increasing letter-spacing, even when used in non-native small-caps, you can produce spectacular web sites with a stunning typography by relying only on a single font, Georgia.

To prove, I’ve collected 32 web sites (that’s 4 bytes of data for you) that do just that: use Georgia as the only font for their HTML copy. Did you notice I specified ‘HTML copy’? That’s because in my collection I’ve included not only web sites that indeed use Georgia and nothing but Georgia, but also sites that recruit the help of display fonts that are not web-safe, by turning them into images, however the only font that’s mentioned in their CSS is Georgia.

Let’s dissect how the following sites have achieved a beautiful presence on the Web with only Georgia on their mind, i.e. CSS.

Georgia here, Georgia there, Georgia everywhere

We’ll start with the sites where, with the exception of a logo or a small graphical detail on the site, every written word is displayed in Georgia. We’ll examine how exactly each of those sites managed to achieve such a pleasing typography without comprising on the look of the entire site. Hopefully the examples below would show everyone, cynics included, that, even with limited typographic resources and tools that are available to us on the Web today, it is not only possible to design ravishing sites, it is given that designers should have no more excuses for blaming the lack of web site aesthetics on the lack of web-safe fonts.

Information Architects

Information Architects

Logo aside, Georgia rules on Information Architects

Oliver Reichenstein’s design is a prime example of what can be achieved with a single typeface if you have the right know-how. The author of a vexed article, Web Design is 95% Typography, backs up his argument with the design of his site and gets the most out of his chosen typeface, Georgia.

Here’s his type magic unveiled: first of all, he chooses a dark grey (#333333) rather than black as the primary text colour on the site’s white background. He uses two more accent colours: light grey (#999999) for the auxiliary text and crimson red (#CC0000) for links. In addition, the auxiliary data is highlighted with H5 heading set in {font-variant:small-caps; text-transform:lowercase; font-size:0.875em;}

The rest is simply a result of pedantically calculated font sizes and leading:

body {font-size:100%;}
.issueIssue p {font-size:0.813em; line-height:1.385em;}
.commentlist .cC p {font-size:0.875em; line-height:1.5em;}
p {font-size:1em; line-height:1.5em;}
h4 {font-size:1em; line-height:1.125em;}
h2 {font-size:1.5em; line-height:2em;}
h1 {font-size:1.5em; line-height:1em;}

Lonely Tweet

Lonely Tweet

Lonely Tweet is comforting lonely Twitterers with Georgia

This is a very simple single page site, with a caring idea: to comfort lonely Twitterers. Andrós has designed it with Georgia only: the default font size is set to 16px, Tweets appear in H1 heading, set with {color:#333333; font-size:3em; letter-spacing:-0.07em; line-height:140%;}, usernames are displayed half of the tweet’s font size with h1 span {font-size:0.5em; font-style:italic;}, links appear in a light grey (#787878) colour. The use of a single typeface, a vast white space and a lonely tree in the snow re-enforce the solitude.

DFCKR

design Fckr

Georgia dominates on design Fckr


Designed in a predominantly grey and white colour scheme, Alex Giron creates an eye-pleasing site with very little CSS trickery and, logo aside, once again with Georgia only. He starts off by changing the default browser settings with body {color:#232323; font-family:Georgia,"Times New Roman",Times,serif; font-size:62.5%; line-height:2em;}, and further bumps up the paragraph text to 12px by setting p {font-size:1.2em; word-spacing:0.15em;}.

Article headings are set in H2 and decorated with {border-bottom:1px dotted #D4D4D4; font-size:1.7em; padding:0 0 10px;}. Try visiting any of the links from the Public News section on the homepage, and you’ll notice how visited links will appear crossed with {text-decoration:line-through;}. Everything is so simple, yet so effective.

Ceramiche Corsini

Corsini Ceramiche

Corsini Ceramiche looks pretty impressive with Georgia only in a very basic styling


Not sure if you’ve got a knack for a beautiful typography? How about getting a bit of practice with Georgia only by emulating some basic styles seen on Ceramiche Corsini: all text, except the copyright credits, is set to 12px, including the headings, that in addition are highlighted in bold.

Colourful Georgia

Georgia looks great in colour and surrounded with colours, so don’t be afraid to mix the things up a bit.

Dean Oakley

Dean Oakley

Georgia keeps things look simple and cool on Dean Oakley


Now that you’ve got it working with basic CSS, how about adding some colour, interesting graphics and atypical horisontal navigation, and you can create a work of art similar to Dean Oakley’s portfolio site.

Surfgarden

surfgarden

handwritten script goes really well with a classic Georgia on Surfgarden


Need some more practice with basic styles and Georgia, how about checking out Surfgarden: display your Georgia in three or four different sizes, three varying colours, three styles (normal, bold, italic), plenty of padding, handwritten logo and notes, and all of sudden your site will be featured in 40 Excellent Blog Designs.

Here are some more colourful examples:

Lucy Blackmore

Lucy Blackmore

on Lucy Blackmore's site Georgia is very legible in small sizes and stunning in large

v1Creative

v1Creative

on v1Creative headings are images, but the rest of the site's content is displayed in Georgia with a minimal styling

Bobulate

Bobulate

It's perfectly ok to pick a different font for your logo and stick to Georgia everywhere else

iPhoneDevelopmentBits

iPhone Development

Even in a small size on a textured background Georgia is still pretty legible on iPhone Development

Giblette

Giblette

The inverted white text on the black background, set in Georgia, is a bit too small on Giblette, but it still works

Carnivale du Vin

Carnivale du Vin

It's only ok to shout and get excited if you use Georgia in small-caps

If you’ve got an authoritative client who likes to capitalize on things and prefers to see lots of uppercase letters, you can tone them down with font-variant:small-caps.

Miles Dowsett

Miles Dowsett

You can't blame Miles Dowsett for choosing a much sexier ampersand in Baskerville Italic than its counterpart in Georgia


Georgia comes with some very beautiful characters but ampersand is not one of them. Fortunately, it’s quite simple to replace them with other more voluptuous ampersands. Plugins like wp-typogrify will style them for you with something like: span.amp {color:#878B3F; font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; font-style:italic;}
Miles took it one step further by styling for in designs for interaction in Baskerville, italic, as well. Other than those two small elements, the rest of the site is displayed in Georgia, but it’s those little details that make things much more memorable.

The Things We Make

The Things We Make

The Things We Make is definitely not for the faintest of hearts. It mixes Georgia really well with colour and lots of it.


If you’re not afraid of mixing lots of colours together and are good at it, then you’ll certainly find lots of inspiration in how Mike Kus blends colour with type. After counting till ten I lost track of how many colours are on this site, but guess what—they work without compromising on site’s usability.

Recent Bits
Related Bits
Get Inspired by 8 bits of Exquisite Typography
8 Questions to Ask about WordPress Plugins
how to get inspired
Bionic Ear: Before and After
Design Critique: Leon Paternoster
Behind The Scenes Of Exquisite Web Typography – Part Two
Behind The Scenes Of Exquisite Web Typography
Google’s Creative Mind
Comment Bits

35 Insightful Bits in response to “Georgia On My Mind”

  1. I love your hand-drawing, Vivien, and don’t think I knew you were born in Tbilisi. Do you still have family there?

    What I find particularly great about this collection is how you’ve shown the CSS code used within each. I don’t have much time to brush up on my coding knowledge, so this certainly helps, and I bet it took quite some time to compile!

    Thanks for helping me.

  2. thanks viv, this is great! one thing, the link for Ali Felski takes me somewhere else…

  3. My blog uses Georgia exclusively and I’ve been quite pleased with the results. Carter created a highly versatile, legible font that has a certain friendly sophistication to it that, for me, relates to the printed page. It’s nice to see it applied so well in the examples you’ve curated here. Kudos!

  4. Excellent, Vivien. In fact, it’s not until one attempts to use other serif faces (especially at text sizes) on screen, that one realizes just how good Georgia is. I only wish that it would be updated with an extended character set and a set of small caps.

  5. @David Thanks for the compliment. Glad you found the CSS code snippets helpful. Yes, I still have my family in Tbilisi, my mom and two brothers, whom I haven’t seen for almost nine years now. Last year’s war between Georgia and Russia made the matters even more complicated. I really hope I’ll be able to go there this year.

    @Simon Oh, thanks so much for letting me know. I’ve corrected the links to Ali’s site, along with a few other typos I missed earlier.

    @Duane Welcome to Inspiration Bit. So glad to see another Georgia-only site. In your case it’s indeed 100% Georgia only. I really like your sense of colour and the Ombré gradient effect that you’ve achieved there.

    @Johno I agree: the more sites I was coming across for this collection the more amazed I was getting by Georgia’s versatility. I’ve been collecting these links for a few months now. Finally I had to stop myself at 32 and publish my findings ;)
    Yes, an extended character set and small caps addition would make Georgia perfectly complete.

  6. Hey Vivien,

    Thank you so much for including retinart in this great article, it made me day and gave me a big grin!

    When I first started working on retinart I was a little put off with Georgia to be honest.. but then after a while of working with it I found it to be a fantastic font to play with.. big, small, lower case, loose tracking — it handles all these without losing it’s character.. we could be stuck with much worse fonts as web standards.

    Fantastic list of links, thank-you for the effort and for sharing!

  7. Great article for the lovely Georgia. I admire the detailed analysis. Many thanks.

  8. Hi Vivien,

    as always: I learned a lot! Thank you for all your effort!
    Those sites show that nobody should hesitate to type georgia (instead of img src)!

    Greetings and we forgot to wish us the best for this year!

    I do it now: for you and your family everything that makes life happy and successful.

  9. Thank you Vivien. My site also uses only Georgia ;) Except for that logotype.

  10. I guess a lot of work went into this article, Vivien. Very useful. Loved the 8 hour day site.

    It’s a beautiful typeface for the web and works across such a range of sizes, which is why it’s suitable if you just want to use one font. It plays nicely with helvetica/arial too.

    Interesting to see people using relative units so much, which will lead to some “pedantic” calculations. That’s partly why I started using absolute units.

    I used to use Georgia a lot: I might well get back into it.

  11. Outside of the wonderful uses of Georgia as the driving typeface, you’ve compiled some lovely sites. I’m glad you led with Oliver’s site, and credited the “pedantically calculated font sizes and leading” for the unique look of the site’s typeface.

    Leon steered me to Andrea Gandino’s site. He primarily uses Georgia, but not exclusively; he spices his headers with Baskerville. Otherwise it would have made a nice addition to your article.

    This is a fabulous series. What font’s up next, or should I ask?

  12. @Alex You’re very welcome. You’ve come up with a very artsy design and Georgia fits it nicely.

    @Daren It was my pleasure to include your site here.

    @Ronny Hi there. Happy new Year to you too, Ronny.
    I keep checking from time to time to see GAG’s new look. Hope you didn’t give up on the idea of featuring new design every month ;)

    @Daus You’ve got a very elegant site there. Perhaps if I get to know more sites designed with Georgia only, I will do a follow up to this site, and definitely include yours there.

    @Leon Thank you. It took me a few months to collect the sites and then a few days to finish the article ;)
    Agree, Georgia looks works really well with Helvetica/Arial.

    It was actually very interesting for me to see all the different approaches designers used for sizing their fonts. Perhaps I should dedicate a new post to this topic and start some discussions around it.

    @Michael Thank you. Glad you liked it.
    Guess what? I love Andrea Gandino’s site and it will be included in my next article that will feature sites that use non-standard fonts on Web. So it will be dedicated not to one font but a number of them.

  13. Guess what? I love Andrea Gandino’s site …

    That’s me, always last to the party. :D

    Seriously, if I could convince the guy who owns History Commons to let me take a serious crack at it, I would love to redesign that site in a manner similar to Andrea’s and some of the other sites featured in this post — old paper, tasty serifs, lots of whitespace, etc. Class and style. Not going to happen, I’m afraid, we’re stuck with the ugly Swamp Thing design for the time being.

  14. Lots of inspiring site designs in this article.

    Here is our take on Georgia by the way: http://themuseumofinnocence.com/

    PS: we love serif :)

  15. I think Georgia is a font that goes under the radar a bit, but looks great in each of these sites. They’re a really great collection – thanks!

  16. Marie-Laure

    Black Max on Sitepoint was right – very informative and interesting article.
    Many thanks for sharing!

  17. Here’s another website that mostly uses Georgia.

    http://www.essenceofthetree.com

  18. Wow… I need a cup of tea after that.

    You’ve linked to some stunningly designed sites in this article. I have a redesign brewing inside me so I’m gratefully taking snapshots of lots of the sites you featured here. Will Georgia feature in my redesign? Very possibly ;)

  19. @Michael Maybe you could start sending the guy from History Commons some of the sites whose design you love, and will eventually convert him? Maybe he just doesn’t know any better. Good luck with it.
    I can relate to that though. The university where I teach database design has the ugliest and user-unfriendly web site, and so far nobody got any luck convincing the administration to re-design the site.

    @Museum of Innocence You’ve got a beautiful site there, but it’s predominantly set in Palatino Linotype, with the fallback to Georgia :)

    @Lucinda Thanks. I agree with you regarding Georgia, hence this tribute ;)

    @Marie-Laure Welcome to InspirationBit. So glad you liked this article.
    And I’m forever grateful to Michael (a.k.a Black Max) for his promotion of this article on SitePoint. I’m getting a steady stream of quality readers from that thread who stay on Inspiration Bit in average for 2 min or so and hopefully go on exploring other posts.

    @Will Emerson thanks for the link. You should consider replacing that text image on the homepage with the HTML text though.

    @Aaron Glad you’ve enjoyed this post. Thanks for the kind words and promotion on Twitter ;) Look forward to your re-design. Good luck!

  20. @vivien: You are right; I realized that we actually used Palatino there just after sending the comment but could not edit the comment!

    Maybe that’s because I do like Georgia a lot and used it on so many other sites. In fact this is what made me think that I’m kind of overusing it (http://www.inspirationbit.com/.....sed-fonts/) and switch to another beautiful font Palatino ;)

  21. @Museum of Innocence haha, so it’s because of my other post you’ve switched from Georgia to Palatino? ;) Fortunately, I didn’t include Georgia in my list of overused fonts, but I see your point in seeing it being overused. Although since web designers don’t have a luxury of working and using thousands of typefaces, I think that the term ‘overused’ cannot be realistically applied to web-safe fonts.

    That doesn’t mean you should switch back to Georgia on Museum of Innocence site, I like how Palatino looks there.

  22. @vivien: Not really :) I discovered your blog recently. That article is a good one though. Seriously I’d add ‘Arial Rounded’ as an overused font (in kids / humor related logos etc.) to that list.

  23. Very nice work.

    I put you in my favorites. :-)

    Perry Rose

Pingbacks and Trackbacks

  1. Pristina.org » Blog Archive » Georgia On My Mind - Inspiration Bit

    [...] Georgia On My Mind – Inspiration Bit. Tags: coleção, georgia, showcase, Tipografia, webdesign Posts Relacionados: [...]

  2. This Week on MA.GNOLIA « /home/kOoLiNuS

    [...] Georgia On My Mind – Inspiration Bit [...]

  3. JeremiahTolbert.com » Blog Archive » links for 2009-01-18

    [...] Georgia On My Mind – Inspiration Bit (tags: webdesign typography showcase) [...]

  4. Bookmarks for December 29th through January 18th → Stevey.com

    [...] Georgia On My Mind“"Mathew Carter’s graceful serif typeface Georgia is re-discovered by Web Designers. Featured here are 32 web sites that rely heavily on Georgia to display their content."” [...]

  5. Greener type | i love typography, the typography and fonts blog

    [...] — via @andyrutledge Book Review — TypeStyle Finder Master Text Frame, What’s the Point? Georgia on my mind Font-weight is still broken FontAgent Pro 4 for Mac OS X Me, Myself and I — CR Blog Sharpening [...]

  6. links for 2009-01-20 « Tlönista

    [...] Georgia On My Mind – Inspiration Bit Georgia, the only web typeface you'll ever need. (tags: typography web design) [...]

  7. Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

    [...] Last week I featured dozens of web sites that use only one of the ten core web fonts, Georgia, to delight our eyes with beautiful typography. [...]

  8. Georgia On My Mind - Inspiration Bit | The PHA

    [...] Georgia On My Mind – Inspiration Bit [...]

  9. the emotional pumpkin » Lots and lots

    [...] Georgia on my mind, which highlights exceptional uses of my favorite web-safe workhorse font, Georgia. [...]

  10. diciottopassi » Georgia on my mind

    [...] celebrare il font InspirationBit ha creato una gallery commentata di 32 siti che fanno di Georgia l’unico font (almeno l’unico definito nel CSS, escludendo [...]

  11. right/wrong/justified

    [...] just severe enough extra credit: georgia on my mind [inspiration [...]

  12. Get inspired by Inspiration Bit – Inspiration Bit

    [...] Georgia On My Mind [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on