Web Design in 2010

If you’re still reading this blog you must be a real fan. Or just plain bored. So I’ll indulge you with some entertainment.

You would’ve noticed by now how rebelpixel.com looks very different to how it has always been for some years now. I always liked it grey. Now though, it’s in boring white that I think is quite a refreshing change. (You wouldn’t know that though if you’re reading this in an RSS reader.) But I guess “fresh” wouldn’t be staying for long.

If you’re reading this on a Mac with a fairly recent browser, you’d think the new minimalistic look blends well with the @font-face embedded font I’m using: Museo Sans. This works in Firefox 3.5 (and the recently released 3.6), Safari, and Google Chrome. Unfortunately, if you’re on Linux or Windows, @font-face rendering can go bad. In my current case, really bad. Look:

Image of text rendering sample of Mozilla Firefox on OS X and Windows 7.

Firefox/Mac text rendering just blows aways its Firefox/Windows counterpart, though I honestly feel it’s more of the operating system’s fault. Google Chrome shows us the same trend:

Image of text rendering sample of Google Chrome on OS X and Windows 7.

Note how Chrome (and Safari as shown below) renders the text inside <blockquote> tag. It’s supposed to be in italic as defined in CSS though I did not declare an italic sub–font for Museo Sans. Firefox tries to make italics out of the single embedded font file while it’s ignored in Webkit–based browsers. What should be the right behavior? I honestly have no clue.

Image of text rendering sample of Apple Safari 4 on OS X and Internet Explorer 8 on Windows 7.

Internet Explorer 8 on Windows 7 paints a different picture: it ignored my EOT–encoded fonts and simply rendered text using the next available typeface in the CSS font stack. It’s broken and familiar; silently I think I’d rather take that compared to the rendering inconsistencies in embedded fonts.

Welcome to web design in 2010—it’s almost just like a decade ago.

Now I should really fix this design.

10 Responses

  1. Hey Markku, nice redesign! I’m still using an old MT template from like 5 years ago. I need to spend time on my own blog’s redesign.

    Note that @font-face has a newer portion specified as the Web Open Font Format (or WOFF.) It’s basically very similar to @font-face but has a bit more security in place for font vendors. This is the future of fonts on the web 🙂

    http://hacks.mozilla.org/2009/10/woff/

    http://blog.mozilla.com/blog/2009/10/20/mozilla-supports-web-open-font-format/

    • Nice to see you here Gen!

      I’ve been closely watching the developments in web font embedding and would love to implement them widely. Unfortunately for now, I’m disabling them again for this design until I find a font that looks good enough on all browsers and platforms with @font-face support. I’m quite sure WOFF will be the future. 🙂

  2. I like your blog’s new look, Kuya!

    ( I was the one who asked you about the Nikon D90 and Canon 500d thing. 😀 Thanks nga pala, though I still haven’t decided yet. )

Leave a Reply