Modern Software Experience

2009-07-01

changes

A new face

Welcome back. Yes, it is the right site. Things just look slightly different. I am sure you recognise the overall layout and colour scheme, but some other things have changed.

I thought the release of Firefox 3.5 was a good moment to take advantage of some modern web browser capabilities I’ve been ignoring so far, most notably the ability to use any font you like.

font embedding

Traditionally, one of the problems of web design before Cascading Style Sheets (CSS) is the limited choice of fonts. There is only a handful of so-called web-safe fonts choices that will work well across operating systems.

The traditional solution to getting a particular font, for example for masthead, is to make an image. That allows to use any font, but introduces many other problems, such as more complex code, with its maintenance and accessibility issues and increased bandwidth usage.

The real solution is to include the desired font. The CSS font-face rule allows the inclusion of any font. Now that Opera, Safari and Firefox support it, I decided to take advantage of it.

Gentium

A lot of free fonts are fine for posters or menus, but unsuitable for body text. Those that are suitable often support a very limited set of characters and do not have true bold and italic either, let alone a true bold italic.

The updated style sheet specifies Gentium, a free multilingual font designed by SIL International. This Unicode font does not just support Latin-1 and the the Latin-1 Supplement, but also Latin Extended-A, Latin Extended-B, IPA Extensions, Spacing Modifier Letters, Combining Diacritical Marks, Greek and Coptic, Latin Extended Additional, General Punctuation, Currency Symbols, Letterlike Symbols, Mathematical Operators, Geometric Shapes, Latin Extended-C, Modifier Tone Letters, Latin Extended-D and Alphabetic Presentation Forms. In short, it contains about everything you are ever likely to need in a Western text.
The main drawback to Gentium as a body font is has an italic, but no bold or bold italic.

Gentium Basic

SIL International also offers Gentium Basic and Gentium Book Basic. Gentium Book Basic is slight heavier than Gentium Basic. These font families are called Basic because they only support Basic Latin and the Latin-1 Supplement. However, they do come as a complete set of regular, bold, italic and bold italic fonts.

combining

So, neither Gentium nor Gentium Basic is ideal, but they can be combined to offer the best of both. The style sheet includes both the Gentium and the Gentium Basic fonts. The font stack starts with Gentium Basic, followed by Gentium. Thus, most body text should be rendered in Gentium Basic with its complete font family, and the more complete Gentium extends its character set with many more characters, in both regular and italic.

The new font stack deliberately specifies Unicode fonts that include support for a wide range of characters, such as Times New Roman.

One of the fallback fonts is the free Doulos SIL. Doulos SIL is distributed with some Linux flavours. The font file for Doulos SIL is more than 1½ megabyte, and is not included on the site.

include order

Several issues I experienced trying to get this to work make it clear that the browser support for web fonts is not mature yet.

For example, I initially included the Gentium fonts in the order Regular, Bold, Italic, Bold Italic, but somehow that confused Opera. When I changed to including them the reverse order ( Bold Italic, Italic, Bold and Regular), it worked fine.

Graublau Sans Web

A font called Graublau (German: Grey Blue) sounds like a perfect fit for a site whose main colours are blue and grey. It is used for the menu and headers, and the font stack specifies fallback to widely supported sans-serif fonts.
Graublau Sans Pro is a sans-serif design by George Seifert. Graublau Sans Web consists of the regular and bold fonts for free. It supports a fairly extensive set of Latin characters including Greek, certainly enough to use it for menus and headings.

Opera and OpenType

I tried using Jos Buivenga’s Museo Sans font for the masthead, but found that Opera displays the default font instead. It does not display Graublau Web either.
What these two fonts have in common is that they are OpenType fonts. It appears that Opera 10 will only display do TrueType fonts, and ignore OpenType fonts.

On Windows, Opera’s default font is Times New Roman; so instead of a particular sans-serif font, it displays the most common serif font. That will not do.

Opera’s limitation made me decide to largely avoid OpenType fonts for now. Largely, not completely. I’ve specified embedded TrueType fonts for the body text, menu and headings, but the masthead does use Museo Sans. Opera 10 does not display it, and falls back to the first font in the font stack it does support. That currently means Lucida Sans Unicode on Windows and Lucida Grande on Mac OS.

It does look slightly different than it used to look. The masthead used to be bold, it is regular now. Museo Sans is available in five weights, with an italic for each, but only the regular weight is free. Embedding the regular weight Museo Sans only to specify a bold rendering would be an insult to the font designer. The Arial Bold it used before was a bit too bold anyway. Even as light text on a dark background, these sans-serif fonts look fine already. The masthead uses Museo Sans Regular.

Of course, Opera’s limited support is fantastic compared to Google Chrome. Google Chrome does not support web fonts at all.

rounded corners

Visible blocks such as the masthead, the main content, the footer and the menu buttons now have rounded corners and a shadow.

I’ve been meaning to use rounded corners for some time, and CSS allows it. The reason I’ve been holding off is that you need to use some browser-specific instructions, and I’d like this site to be standards-based.
The silly thing is that the browser-specific instruction only differ from the standard one by a prefix that highlights that the instruction is not standard. Well, the Mozilla-specific command for rounded corners actually is somewhat different from, but unless you try for elliptical corners, you will not notice.

The CSS style sheet now uses the standard instruction and instructions for WebKit and and Mozilla. I do not test with with Konquerer, but have added the KHTML-specific variation of the command for good measure.

support

The rounded corners show up in Firefox, Safari and Chrome.
Opera contains to show straight corners. The rounded corners you see on the Opera web site are not made with modern CSS, but with old-fashioned background images.

box shadow

The style sheets uses drop shadows to give major elements a three-dimensional effect.

That immediately looked just fine in Firefox but in Safari and WebKit it did not play well with a box that already had a thin border. That problem was easily fixed by adjusting the border a bit.

I considered removing the border altogether, letting the shadow outline the box, but Opera needs the border because it does not show box shadows.

text effect

A glow effect has been applied to the masthead and footer. The menu buttons have a text shadow effect that turns into a glow effect on mouse hover. The glow effect is just a shadow effect with different colours.

The text shadow effect works in Firefox, Opera, Safari and Chrome. It does not look as good in Chrome and Safari as it does in Firefox, because Chrome does not pick up the web fonts and Safari does not pick up all of them.

buttons

I’ve increased the distance between the buttons. At the smaller distance between the buttons I used before, there was not enough white space for the shadow effect, and the actual effect of a grey shadow between grey buttons was to merge them together into a solid mass.

I played with a dark blue shadow for the button. The visual effect is nice, but the buttons stand out enough as it, and I decided that it would be better to consistently use grey for all shadows.

fonts in Safari

All four major web browsers display the site, with or without rounded corners, and with or without web fonts. It currently looks best in Firefox, but looks okay in all of them -except Safari.

local

When asked to show a page on my local machine, Apple Safari gets confused by the additional fonts. It may display the page correctly, but mess it up as soon as you hit F5 to refresh the page, and another F5 may put it right again.

Even if there were some error in the page or style sheet, you’d still expect a browser to be consistent, and display the same page the same way every time you refresh it.

I am guessing this Safari problem is related to Apple’s attempt to bring Mac-like font rendering to Safari for Windows, and their less than enthusiastic testing of Safari on Windows. Its font handling is so weird that the first version of Safari for Windows did not display any font.

on the web

I have not experienced this problem with the same page loaded from the web, but there is another problem; Safari apparently does not display page text until it has loaded the corresponding font, which it has to download. While it waiting for the download to finish, the page is eerily empty. This is a problem on the first visit (after which the font file will be cached), and specific to Safari; Firefox displays the page with a fallback font until it has downloaded the font. It uses the font once it has downloaded it.

updates

update 2009-07-02

The digits in the Gentium font are not all the same width. The practical upshot of that was that the date boxes on for example the home page are not all the same width either. Setting a fixed size does not work; Opera and Google Chrome still use Times New Roman and in those browsers the dates are a lot wider than in Firefox and Safari.
The solution chosen is a minimum width; that minimum is large enough to ensure that the date boxes are fixed width in Firefox and Safari, and small enough to not impact the display in Opera or Chrome at all.

font licenses

Gentium and Gentium Basic are available under an Open Font License. Graublau Sans Web is free for web use. The no-cost Museo Sans weights are free for web use provided the author and his web site are mentioned in the CSS style sheet that loads the fonts.

links

web browsers

standards

fonts