HTML5 and web fonts

I have been working on the new design for this website for a few months in my spare time. I normally think that my most recent design is my best, and this one is no exception.

This series of posts will cover some of the decisions I have made while designing this website. This first article looks at the issues surrounding HTML5 and web fonts.

Browser support

It is high time to use HTML5 and use it properly. The only problem from my point of view is the lack of support in Internet Explorer 8, which is the oldest browser I feel the need to support. I have solved that problem by using this technique from Alex Tatiyants.

Headings and the document outline

The HTML5 spec encourages that you use h1 for all headings, using sections instead of the more traditional h1–h6 to define the document outline. However, it still leaves open the possibility of using h1–h6 if you prefer.

Having read a couple of articles on the topic, I have decided that the world is not yet ready for the h1-only technique. Screen reader support is shaky. So for the time being, moving over to h1-only would be a backwards step from an accessibility point of view. As such, I have decided to stick with h1–h6.

Useful articles:

• HTML5 ranked headings for screen readers – .net magazine.
• The truth about structuring an HTML5 page – .net magazine.

Asides

I am using the aside element to display supplementary extra information, pull quotes and other features that complement the main content of the articles.

I am not yet sure how often I will use it, but it is great to have that option to add asides in HTML5.

Web fonts

I first used a web font when I launched Stepreo over a year ago. For that, I used Questrial. It’s quite nice, but didn’t really fit the vision I had for this design.

I spent quite a while trying to find the right font. I was quite sure in my mind what sort of thing I was looking for — something readable and friendly, but not too familiar. I wanted something clean and clear, like Microsoft’s Segoe UI. And, because I’m a cheapskate, it needed to be free as well.

I thought I had struck gold when I came across Cabin, which reminds me of Univers, a font I admire. But I had to rule it out because the @ symbol is just too damn weird. A big shame because in every other respect it was exactly what I was looking for.

For a long while the design used Pontano Sans. But the lack of a proper bold version of the font — which seemed to be causing some major display issues in some environments — meant that I once again had to look elsewhere.

I finally settled on Oxygen, designed by the same person who designed Pontano Sans. Considering it was originally quite far down my list of options, I have grown to love it. It does remind me a lot of Segoe UI. It also reminds me a lot of ITV’s font, which wasn’t what I was looking for — but I like it.

It also has a cool companion monospace font, Oxygen Mono, which I use to display code on this website.