First of all, my apologies for the unintentionally extended silence on Inspiration Bit. I have lots to learn from other busy people on how they manage to combine work and family with blogging, I’m definitely struggling with that.

Leon Paternoster‘s minimalistic sites have long been on my To Review list, and since then they even underwent a complete overhaul. Leon is an ardent crusader for accessible and readable web design, he’s keenly interested in typography and is irked every time he sees a web site with illegible text or where a chunk of text was saved as an image (I feel your pain there, Leon).

So it comes to no surprise to see his own sites with very minimalistic, stripped down to bare necessities, designs. He’s also released two minimalistic WordPress themes: Into the White (which was featured on Smashing Magazine) and Velouria.

Single page beauty

The style of his personal single page web site was greatly influenced by Franz Neumann’s elegant creation of Stories & Novels. But after the initial resemblance in the layout and minimalistic design, the similarities end.

Leon Paternoster's sophisticated minimalistic homepage

The use of Adobe Garamond for the body text on Stories & Novels makes me feel I’m reading a professionally scanned copy of a beautiful book online. Leon, however, chose to go with a safer font for Web: Georgia. In fact, with the exception of the Garamond for the fancy ampersand, the entire page is set in Georgia. And I actually prefer the clearness achieved by a gray text colour and bigger font size on Leon’s site vs. the black and small text on Stories & Novels, that make the latter one appear a bit blurry on my screen.

An interesting thing to note about the different design practices is the way that red/burgundy line was achieved on those two sites: an empty DIV with a red background and 2px height on Stories & Novels vs. the dark red line set to the HTML tag with a top 0.2em border on Leon Paternoster’s.

The only critical comment I have about Leon’s personal page is the slightly excessive use of white space. I do like to see designers practice the use of negative space in their designs, but because there are no images on Leon’s page, no major distractions (I don’t count the red link lines here), lots of white space feels a bit overpowering and unnecessary. I think by slightly reducing the space above and below the site title and the introductory paragraph and a tad tightening of the line-height in the Work area, all parts of the content would tie with each other more effortlessly. What do you think?

One thing that puzzles me a bit on Leon’s homepage is the absence of the red star symbol anywhere on the page, yet it was used as a favicon for the site? I wouldn’t really mind seeing that red star appearing somewhere in the content for some additional visual interest. Perhaps Leon could add a footer text with some copyright, credits stuff, preceded with that star icon? On the other hand, why not using the logo featured on the blog as a favicon?

Blogging Swiss style

The blog link from the homepage takes us to a completely different design of Leon’s blog. The first thing that catches the eye, besides seeing the almighty Helvetica everywhere on the site, is the post excerpt on the left, set in a huge (2.5em) font size that looks more like a quote than an excerpt, with the post’s title underneath looking more like the quote’s source. At first it got me confused, thinking that this must be Leon’s most recent post. But as it turns out, the featured excerpt comes from the latest Must Read post.

Leon's blog has gone sans-serif with lots of Helvetica, unlike its parent home page that's set in Georgia

The ‘Must Read’ theme continues throughout the blog: you can see the list of Must Reads on the homepage’s right sidebar, and the Archives are starting with the list of ‘Read these first’ posts before switching into the standard chronological order.

Saying No to images

Staying true to his minimalistic ideals Leon doesn’t believe in using images to support the design (you will still see the images within the content though), so even his logo is formed with a few simple CSS strokes: red background colour and padded white lowercase initials inside the square.

The colour scheme is super minimalistic as well: grey (various shades of it) for text and hover links, blue for links. And as I mentioned before Helvetica is the main font on the site, with the exception of Georgia in italic for certain phrases with an emphasis on them and the latest Tweet in the right side of the footer, plus Garamond italic is used to style the preposition “by” in the post’s author details.

The blog is based on two columns, with a minimal dynamic content on the right sidebar that changes depending on where on the site you are: on the home page (and Search results page) you see Must Reads and Recent Posts, on single post pages you see only Recent Posts, on About page you can learn a bit more about Leon, while on the Archives page you see only a list of tags.

Even the site navigation is reduced to the minimum: there’s no contact page, only email address, so you’re only left with unadorned list of three main pages—Home, About and Archive, displayed on the right side of the header below a simple search box.

Blog Critique

My critique is going to be as minimal and laconic as the design:

  • I find Helvetica set to default 16px (100%) difficult to read in long paragraphs;
  • I think the lists need some breathing space between the list items;
  • Would love to see more colour on the site: perhaps re-using that same red from the logo/favicon on link hovers?
  • Too much Helvetica can be overwhelming, some more typographic colour wouldn’t hurt either: perhaps more Garamond treatment, more font size variations?
  • Not crazy about the date/author data styling above the post (hint: Garamond would look nice here not only with ‘by’);
  • Once again puzzled about the use of the star symbol as a favicon, and not seeing that star anymore on the rest of the blog.

Overall it’s a pleasingly looking user-friendly blog, where the content is the site’s main feature with no competition from design. Over to you now: what do you think of Leon Paternoster’s homepage and blog designs? Would you recommend anything to improve the site’s architecture or style, or do you like the simplicity of it and wouldn’t ask to change a thing there?

Recent Bits
Related Bits
Design Critique: SEGD
Design Critique: Klepas
Bionic Ear: Before and After
Striking Web Sites with Font Stacks that Inspire
Blog Redesign: First Steps – Inspiration And Ideas
Get inspired by Inspiration Bit
8 Constructive Bits On Running Blog Contests
The Naked Truth About David Airey
Comment Bits

41 Insightful Bits in response to “Design Critique: Leon Paternoster”

  1. Leon’s website is certainly minimalist – not even a footer. I think the layout is smart and clean. I also like the layout for the blog but like you I would prefer to see the use of Helvetica broken up a bit. I also don’t like the transition from serif font (website) to sans serif (blog). I’d prefer a greater degree of consistency between the two.

    As for trying to balance work, family and blogging – that is not an easy thing to do! Don’t even get me started …

  2. Leon does deserve a kudos for providing another example of websites that are kept simple, stupid. I’m sick of seeing flashy, image-heavy websites that feature stunning graphical borders, shadowing and textures yet the text received little to no love whatsoever. I’m happy to see a small resurgence towards clean and easy-to-scan designs.

    The only thoughts I’d add to the your critique would be the slightly uncanny feeling I get when moving from the homepage to the blog—that change between the use of serifs and the neutral, almost cold, feeling imparted by the use of Helvetica. I also would to close the large gutter between the links under ‘Work’ and their descriptions.

    Ta for bringing Leon’s site to our attention. (:

  3. Tracey
    You’re right, we don’t see that many sites without footer nowadays.
    Regarding balancing family & work, at least it makes me feel not as bad, realizing others go through the same battles too.

    I agree with you and Tracey, that there’s too much of a contrast between warmer home page in serif vs. colder Helvetica on the blog.
    Since I’ve seen so many transformations on Leon’s site/blog, I’m assuming they’re still in experimental stage, and hope he’ll find our discussions here helpful to get a smoother transition from the homepage to his blog.

    Thanks to your comments, Tracey and Pascal.
    Oh, and I’m also happy to see the increasing number of sites that started paying attention to typography.

  4. Vivien – many thanks for the critique. I really appreciate your comments.

    Yes, it is very much a case of getting an idea and trying it out on the site. It’s had a bit of an uneven development: I guess I should merge it into one design.

    The blog was self-consciously ‘cold’, ‘Swiss’ etc. I sweated a bit over the 100% helvetica/arial, but kept it on a point of principle: it’s not actually set to 16px, just whatever the user has set their font size to. I’m guessing 99.9% of people don’t change the default setting, but still…I’ll probably go for Georgia next time round, as it looks just fine at 16px. I’ve always assumed bigger text=more readable, but it’s interesting that you say you find it difficult to read.

    As for the other bits and pieces – I’ll try them out to see what works.

    And as for juggling work/blog/kids – well, this is the 4th time I’ve tried to add my reply. It looks as if I might get to the end without any interruptions this time…

  5. You’re very welcome, Leon. I enjoyed ‘dissecting’ your site and studying the code.

    I don’t think that bigger text is always more readable. On your blog, it’s very readable in short paragraphs, but the longer the paragraph got the more difficult it was for me to read it online.

    I look forward to seeing what you’ll come up next for your sites.

    Oh, and I think it’s universal now that kids and interruptions are interchangeable when parents try to work from home. My daughter now comes to me and orders: “Mama, enough, I’m tired of you working”. And drags me to play with her :)

  6. Hear, hear for the clean and simple!

    As an aside, in creating Stories & Novels as a place for my published fiction, I wanted to bring the most salient aspects of print design, e.g. actual indented paragraphs, flush left on opening paragraphs or after breaks, fixed line lengths, etc., to the experience of reading fiction on the screen. CSS makes that possible with minimal code, unlike the complete mess that “HTML export” functions in word processors generate. Moreover, I wanted the quality of the reading experience to hold up when moving to a mobile platform, where the fiction might have an even bigger audience. So throw in a dash of code and the text looks great on a device like the iPhone or iPod touch, legible in both portrait and landscape modes, ready for consumption. Finally, as I’m old-school and personally like my fiction printed, I offer PDF versions that can be downloaded and printed, created both in US and A4 sizes for maximum compatibility.

  7. Franz, thanks so much for stopping by. I think you’ve achieved your goals for the site brilliantly. It’s a beautiful piece of online work that resembles so much the offline experience. PDFs and mobile support are perks that I’m sure all your readers appreciate a lot.

  8. I’m a great fan of minimalism, so I like the design concepts. I have to admit, though, that the blog typography is so “cool” as to be absolutely chilly. You might do better with a wider, “warmer” sans-serif such as Verdana or even Trebuchet MS, or if that doesn’t suit you, a font with a bit more personality such as Tahoma might work for you. (I’m assuming you’re sticking with the more-or-less universal fonts; a less available font such as Frutiger Linotype or even Segoe UI might work beautifully, but how many people have them, comparatively?) Just a few degrees of warmth would go wonderfully, I think.

    It’s good that you gave a nod to your Linux users with your Nimbus Sans in the font stack, but there are also Linux people out there who use Liberation, DejaVu, and Free fonts.

    But I’m an amateur lecturing someone who designs rings around me. Just some thoughts, take them for what they’re worth. You’ve styled a lovely site.

  9. Franz – thanks for commenting (and the inspiration!)

    Michael – it’s pleasing that someone noticed my nod to Linux (the font stack was actually created before I switched to Ubuntu). Fonts in Linux are difficult, mainly because (in Ubuntu at least) you have to change the default display settings to get it to render type decently. Once you do it’s nearly as good as OS X, and it opens up a new range of fonts. I could see a high font stack developing (limiting it to screen-friendly fonts, of course).

    The design was intentionally cold. I know next to nothing about print typography, but I saw a photo of a book that had been set in the ‘Swiss style’ that I kind of liked. The rest followed on from there. I think the next design will be completely different: lots of serifs.

    Once again, thanks to everyone for their advice and comments.

  10. Leon, I found Vivien’s blog while researching an article I’m writing about “definitive” font stacks (har) for SitePoint. I’m wrestling with the problems of serving as many Linux users as possible knowing the limitations of the Linux font displays, and of creating “comprehensive” font stacks without putting in two dozen separate fonts. (One serif stack actually has 24 fonts in it, but that includes 5 variants of Palatino, 4 variants of Lucida, 3 Garamond variants, and 5 closely related Linux fonts. Still, it’s troublingly bloated.)

    I’ve become a fan of the Windows Vista fonts–unusual for me to like anything Windows–though it’s not easy incorporating them into your font display because many of them are much smaller than their cousins, and equally problematic because they pretty much require ClearType in a Windows display. You might give Constantia a spin in your exploration of serifs.

    Thanks for responding, Leon. I’m curious to see how things develop in your redesign.

  11. @Leon: Nice to see someone else taking the free desktops into consideration, particularly as many of them lack both well hinted serif and sanserif typefaces which are then often displayed as the browser grabs the system serif or sanserif after finding none of the faces mentioned in the font stack. Nonetheless there are a few good rudimentary faces, notably my personal favourites are the Bitstream Vera and Liberation families, of which the Vera Serif is beautiful and sets a strong linear mood with its slab serifs and the Liberation Serif looks great in print. What’s still missing (and on Windows too—though I haven’t checked the Vista sanserifs) is a proper sanserif italic.

  12. Michael – I don’t think having 24 fonts in your stack is a problem in terms of memory, just a bit of a pain to figure out. It must also be some sort of record :)

    I too like the Vista fonts: I was using Consolas on my site, but I appear to have mislaid my code styling. I’ll certainly consider the serifs (Cambria’s pretty good too, if I remember rightly).

    Simon – that’s really helpful. Any sans serif recommendations for Linux?

    I get round the lack of a proper sans italic by setting em to a serif. At the risk of showing my ignorance: What are the good sans italics on the Mac?

  13. @Leon: Sadly all the list of free quasi-decent sanserifs is small. Bitstream Vera, DejaVu (which is actually just an extension of the Bitstream Vera family to provide greater Unicode support), Liberation, and Nimbus sanserifs all lack proper italics. I say quasi-decent because although they are quite legible faces, they are all modeled or heavily influenced by Helvetica and Arial—almost imitations, even in terms of metrics. That was a long winded response to your question: no, there aren’t really any sanserif recommendations outside of free terms they have been released under (as in beer & speech)—nothing particularly exciting or interesting.

    Good sanserifs that ship with the Mac OS X system and feature proper italics are Gill Sans, Lucida Grande/Sans, and Myriad Pro. Trebuchet MS also features a proper sanserif italic—though I quite dislike it’s e—it’s definitely a reasonable cross-platform option (at least between Windows and the Mac, and any users who download the face from Microsoft, like via Ubuntu’s apt msttcorefonts meta-package).

  14. Leon, I’m currently using Vista fonts on Firefox’s display (except for the serif font) and am quite happy with them for now. But that’s not the same as designing Web sites for the world to consume….

    If you’re curious, I’d be glad to share the proposed font stacks with you, if nothing else than to make you laugh at just how many fonts one person can ram into a stack. (Most of the others have around 12, and that includes variants.) In fact, I’d love to get Vivien’s response as well–both of you have a depth and breadth of typographical knowledge that I lack. Give me a nudge if you’re interested and/or have the spare minutes.

    Simon, good to know which fonts have strong italics and which do not. Having a browser or other program “render” a font into italic or bold is a brute-force solution at best, but unfortunately most fonts don’t give us a better option. Any thoughts on Linux’s Free Sans, Free Serif, and Free Mono fonts? I do know they were created to be used with the International Phonetic Alphabet, and at casual glance don’t look much different from other, similar fonts, but my knowledge is limited.

  15. @Michael: Listing a large number of faces in a font stack will increase the likelihood of every user having one of the faces you list, thus allowing you to control over that element of the typography but beware that beside each font having its own aesthetic qualities, there are lot of little quirks and limitations worth noting and testing. Big ones to watch out for are sold-style or hanging numerals, the aforementioned italics or lack thereof, kerning problems (arises often unexpectedly when setting other languages), x-heights and the ‘physical’ size of the type. The more faces you note the larger the number I’d recommend to test for, including mixes (mixes between all the seris and sanserif faces).

    Coming back to freely licensed or public domain fonts and your question regarding Linux’s Free Sans, Serif and Mono-spaced fonts, do you mean boringly (and aptly) named ‘Sans’ and ‘Serif’ that come with many GNU/Linux/UNIX/… installations? I don’t know much about the language and Unicode support of these two faces in particular, though they are both also very reminiscent of Helvetica/Arial and Times/Times New Roman. I recommend listing Bitstream Vera Serif or depending on preference, Liberation Serif, otherwise sticking to DejaVu (due to it’s extensive Unicode support). If by some chance a free desktop user is using a greatly outdated machine (prior to 2000) they should have one of these sets installed, and hey, if not so long as you’re listing ‘serif’ and ‘sans-serif’ at end of your font stack declarations the system should fetch something close to what you’re after.


  16. Simon, for some reason the system isn’t allowing me to respond at length to your post. I’ll try again later. Thanks for replying so quickly.

  17. Wow, I’m so thrilled to have Linux fonts discussions here. Unfortunately, I don’t know much about Linux support for fonts (it’s been a long time since I’ve worked with Linux). I did notice the presence of Nimbus in Leon’s font stack, but somehow forgot to mention about it when writing the review.

    So I’m really glad that Michael has brought it up and that evolved into such interesting conversations here.

    I think there’s not enough information on cross-platform font stacks that go beyond the usual suspects from web-safe fonts, so if any of you (Pascal, Leon, Michael) can write more on this topic, that would be great. If you’d like to write a guest article on this topic, I would be more than happy to publish it on iBit.

    Michael, did your lengthy response include many links? I wonder why you were unable to post it here. If it doesn’t work again, you can email it to me, and I’ll post it here on your behalf.

    Thanks so much, everyone. Btw, did you all see the article on Unit Interactive on Better CSS Font Stacks?

  18. oops, sorry… forgot to paste the link, here it is: Better CSS Font Stacks

  19. Thanks for the warm welcome, Vivien. I don’t know a lot about Linux fonts myself. I’ve installed most of them on my creaky and cranky Windows XP box, but that doesn’t make me an expert in using them by any stretch. I’m including some info about Linux fonts in the upcoming Sitepoint article.

    Funny you link that article, Vivien; in some ways, that article was the inspiration for the article I’m putting together.

    I didn’t include links in the previous post, but I did copy and paste it from a text editor. Maybe the system didn’t like the paste job. I’ll rewrite the highlights below.

    Simon, my article “splits the difference” between the typography and font mavens who know and care about such issues as leading, kerning, and x-heights, and most designers who don’t know much of anything, and who want to get past the usual “Arial for sans, Times NR for serif, Verdana if I’m feeling all frisky and cutting edge” choice. The idea is to give designers several choices–wide sans, thin sans, wide serif, thin serif, mono–let them grab an entire stack, tweak it a bit to match their own preferences, and move on. You, Vivien, Leon, and no doubt other visitors to this blog know too much about the subject to get a lot of use out of it (except to point and giggle and say, “Why did he match THIS font with THAT one?). If any of you guys would care to run your well-trained eye over the proposed “one size fits all mostly kinda sorta” stacks for the article, I’d be more than pleased to send them to you, or post them here. (24 fonts in a single stack is indeed verging on the ludicrous. More importantly, I’d hate to publish the article and then find that some of my almost-equivalencies are less than equivalent….)

    I don’t know if the Free Sans etc (FreeFont) Linux selections are the same ones bundled with Ubuntu and other distros. I do know that they’re designed to work with IPA, and other than that, they’re fairly standard in appearance. Interestingly, I put the DejaVu fonts in the back of the Linux choices because I learned from another source that they often have problems rendering properly in Opera.

    Let’s see if the system takes this post. Thanks again for the kind and informative responses, all.

    Edit: Yes!!

  20. @Michael Tuck: Great to hear you downloaded some of the free fonts available typically on free desktops. I haven’t done any testing on how well they render under ClearType, but all four families I listed above are well hinted and I find render quite well under the FreeType subpixel rendering engine.

    It’s definitely true that many designers don’t share the (somewhat pedantic?) love of typography that type nuts do, which is why it’s great to see a resurgence of interest in the field with articles appearing on many well-read online web design publications, and of course John Boardley’s work on I’d be hesitant to accept a one-size-fits-all font stack, as every situation is different, but with the current rather limited palette of options and the desire to get on with other parts of the design, I can see a need for something of the sort. I’d be happy to look over any part of your article if you like—feel free to drop me a line.

    I haven’t heard anything about rendering issues with DejaVu under Opera. Do you have a link?

    By the way, to anyone following the discussion, figured I’d quickly list three big families I mentioned above:
    • DejaVu, based on the Bitstream Vera family with greater Unicode character support (more glyphs than its predecessor): download page and changelog;
    • Bistream Vera: download page;
    • Liberation: download page and the Wikipedia article on the Liberation family, which is quite extensive.

  21. Pascal, thanks a lot for the links and more info. Sorry for ending up in the moderation queue (I’ve got it set up to max 3 links, perhaps I should increase that limit)

    Michael, glad the long comment worked for you this time ;)
    I highly recommend you to send your article to Pascal for review. He’s got an incredible knowledge in Typography (more than I could ever hope for myself), and he’ll be an invaluable resource for you.

  22. Michael – I’d ditto Vivien’s comment: Simon is your guy for typography. I have a PDF he made available for download which gives a great overview of web typography: I’m sure he’d be happy to provide the link.

    All I’ll add is that I’m interested in the appropriateness of certain fonts for viewing on screen. I’ve come to the rather boring conclusion that it’s georgia for serif body copy and arial/helvetica, verdana, trebuchet or lucida for sans. The interest comes with providing a bit of texture, something Vivien does well on this site with the Baskerville, for example.

    I get a quite a high proportion of Linux users on my site, so I’ll definitely be exploring this area (and I use Ubuntu). I think most will have the common, cross-platform fonts because they’re pretty easily available, and Linux users are more inclined than most to search for and tinker with things. If you want to email me the stacks, go ahead.

    One problem I’m finding with Linux is that it renders Arial really poorly. I’ve no idea why this would be the case.

    You might also want to look at an article about Linux and web fonts by Jonathan Christopher.



  23. @Vivien, Leon: Thank you for the kind words. The only PDF I can currently think of is the slides from my Beautiful Web Typography talk (requires sign-up to download the PDF; linking to Slideshare because my site is down… again). I actually need to fix the presentation a bit for its next run: some stuff to add, cut, and move about.

    The recent web fonts module discussions and articles have made me come to a realisation. When setting a page with the aim of achieving consistency—leading, ‘physical’ type size, and particularly if you want to pair a serif with a sanserif—picking Georgia and Arial/Verdana (and possibly Helvetica first in the font stack as Arial and Verdana’s metrics are similar to that of Helvetica’s) is the pretty much all you’ve got to ensure everything looks dandy. (Though probably most of these details will only really be identified by nosy typographers with too much time on their hands.)

    Designers have been yearning for additional fonts to use on the web for yonks. I can sympathise, but it shouldn’t be an invitation to neglect the best of what we’re stuck with: Arial, Georgia, and Verdana. The latter two were in fact specifically designed for screen use (and Verdana’s pesky combining characters bug was fixed with the version that shipped with Vista). I find Georgia in particular much more legible across all platforms than many of the beautiful serif typefaces designers may want to use (particularly at the small sizes many like to set their body copy in). With a little imagination I think a lot of good can be done with Georgia and Verdana.

    Thanks again.


  24. Pascal and Leon, I’d be more than pleased to have you peruse that article. Please be blunt; I’d rather know I’ve made foolish choices now than after the d*mn thing’s published. I also tend to the overkill, hence the dozen (or more) fonts in many of the stacks. If they can be trimmed of irrelevant or non-comparative fonts, so much the better. I’m also considering providing “stripped-down” versions of each stack alongside the ones already there.

    Link to Megan’s claim about DejaVu having rendering problems; scroll down in the comments.

    Pascal, I agree with you about using a “one size fits all” font stack being a poor design option. But if it gives some less-than-savvy designers a better option than the usual, it may do some good in the long run.

    Leon, in the never-ending redesign of the site I work with (don’t ask, it sends me into fits), I changed my serif heading fonts to the Palatinos after visiting Jon Tan’s site for the same reason you note Vivien’s choice of Baskerville: texture. And I agree with you about the necessity of considering screen vs print display.

    From what I understand, everything renders Arial poorly. :) It is to Web fonts what VHS was to movie playback.

    Everyone, thanks for the links. Some I had and some I didn’t. If nothing else, the enormous link resource list at the end of the article will be of use, I think.

    Vivien, I repeat myself, but thanks again for hosting such a lively and (for me) invaluable conversation.

  25. Pascal, thanks for the link to the slideshow. I plan on spending some of this rainy afternoon with it. I didn’t know there was a revised version of Verdana that shipped with Vista. The Wikipedia article is informative about the bug, but irritating on a personal level–since my copy of XP is unauthorized (cough), I can’t download the EU font update to get the new version. Time to go surfing….

  26. @Michael: Although Microsoft has discontinued the ‘free’ web fonts downloads, they were released under terms that permitted hosting on third party sites and distribution—which is how the popular msttcorefonts package fetches the Microsoft TrueType web fonts for package managers of many GNU/Linux/UNIX systems. The RPM project that looks after this is corefonts. Both these were possible due to cabextract which pulled the fonts from Windows .CAB files. To cut to the chase, you can grab all the fonts for Windows (they’re contained in .exe installers) from the corefonts SourceForge downloads page. I have no environment to test these on at the moment; I’m not sure if the Verdana installer features the 5.01x version of Verdana. The version of Verdana that currently sits on my Mac is the 5.01x version, and as far as I can tell I have the right to share 5.01x in unaltered form (which is how corefonts could redistribute them), so if you can’t get it working from the installer I’d be happy to mail you a copy of Verdana to you.

  27. Pascal, it’s a generous offer, and one I’ll gladly take you up on. Thanks!

    purplesage23 AT yahoo DOT com

  28. ok, I’ve changed the settings to allow 8 or more links in the comments. Sorry for getting your comment flagged as spam once again, Pascal.

    Thanks for all the links and lively conversation, everyone!

  29. @Simon – yes, with @font-faceI suppose we’ll see some more variation. The scope for really bad web typography is scary!

    I also rather like being restricted to a handful of fonts (and the only two I ever use are Georgia and Helvetica/Arial, with the odd peppering of something like Times or Garamond italic): as you say, you know what results you’ll get, and it focuses the typography.

    I may go mad and experiment with Verdana one day…

  30. I’ve been working for some time on two articles for iBit (mainly, collecting example sites and studying their code): one article is showcasing beautiful sites that use only Georgia to achieve a very elegant typography; the other article would feature stunning web sites that use non-standard, not web-safe fonts, though do specify the appropriate fall-backs in their font stacks.
    In both articles I will be going into details and showing the CSS code and sample texts that would explain how that beautiful typography was achieved on those sites.

    I can’t make up my mind though as to which article I should post first: Georgia only sites, or non-standard web typography? What would be your preference? ;)

    Oh, and I too am a bit scary on potential typographic chaos that could happen with cross-browser, cross-platform support of @font-face. Just like some design graduates go crazy with building Flash-only sites, they might get tempted to use all their favourite fonts at once…

  31. I have a feeling my comment was just lost in the tubes somewhere. D’oh.

    @Leon: Indeed, and beside the disagreements over the technical implementation of the CSS web fonts module, the ability of link or embed additional fonts raises issues of quality of those fonts. Good hinting in fonts is paramount to good screen legibility, making inconsistent user agent handling of non-integer font-size definitions more problematic—some browser round up, others will round the decimal down whilst others still try to render the type in the defined font at that exact non-integer size. An example would be a designer carelessly linking or embedding a font lacking hinting tables that is set at say, 11.725 pixels.

    @Vivien: Propose the one showcasing web-safe fonts first followed by it’s opposite that also features screenshots of the sites with type set in the various fall backs as comparison?

  32. Maybe a progression from the ‘simple’ Georgia-only approach to the more ‘complex’ lots-of-fonts?

    I’m intrigued: I can only think of iA as an example of Georgia-only.

  33. >>I may go mad and experiment with Verdana one day…

    Settle down there, big fella. :)

    Vivien, I would prefer to see the non-standard typeface article first, but that’s just my preference.

    Like everything else, @font-face would have its “nine-day wonder” span, where folks throw every font they can think of at us. Things will eventually settle down. Efficiency and sensibility usually win out in the long run, Britney Spears notwithstanding. But it won’t be a pretty period of time. The “good” thing is, we’ll suddenly collect a ton of neato keeno fonts (more than we want, undoubtedly).

    However, as long as the font foundries are unable to settle on how to allow @font-face to distribute their fonts without them receiving $$ for them, I don’t see how it’s going to happen.

  34. Speaking of font screenshots, any suggestions on producing them? My Photoshop skills are right up there with my brain surgery skills; I can get the text strings to appear, but strange and unwanted things soon ensue and the whole thing just becomes an annoyance. I am forced to go find one of the cats to settle me down. Any alternatives?

  35. …Britney Spears notwithstanding

    haha… how true :)

    Ok, stay tuned for Georgia-only showcase first, followed up with non-standard fonts.

    Leon, perhaps I should mention that some of the sites on my Georgia-only list do rely on other typefaces as well, but for logos or special headings only (saved as images), however all the HTML copy uses strictly Georgia.

    Pascal, I would love you to perhaps write an article on ‘hinting tables’? I don’t think I’ve seen anyone else before raising that issue when linking or embedding additional fonts.

  36. not sure about font screenshots, but site screenshots I take with Screengrab add-on for FF, and I usually save my work with fonts as PNG.

  37. God, color me stupid. I’ve already installed Screengrab. Duh.

  38. @Vivien: Essentially all the knowledge I have on font hinting is contained in the Wikipedia article on them—I could probably learn a thing or two from it actually. I haven’t done much digital font design so I wouldn’t be the right guy to write about the topic. Someone talented like Jos Buivenga would probably the best chap to approach.

Pingbacks and Trackbacks

  1. Elegant og minimalistisk webdesign | Hittegodskontoret

    [...] Inspirationbit har nettopp publisert en gjennomgang og vurdering av Leon Paternosters elegante og minimalistiske nettsteder. [...]

  2. Leon Paternoster — Readability and font sizes

    [...] always assumed that larger font size = more readable, but having read Vivien’s critique of my website, so comments on the iA site and listening to my work colleagues, I’m not so sure. Garamond [...]

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

    [...] on SitePoint where he presented us with 8 Definitive Web Font Stacks. He’s put lots of thought and work into his research, but unfortunately SitePoint has drastically cut down the article, though gave [...]

Selected Bits





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, play with my daughter and try to balance family, work, friends and a somewhat active social life on