A different Firefox II: cross-platform font display issues

One of the things that I have been sorting out on this blog is how the fonts appear in Firefox running on Ubuntu. Even with the same fonts and the same browser, serif fonts were being displayed smaller and appeared more fuzzy in Linux than in Windows. And that’s even with the font sharpening that comes with turning on Ubuntu’s visual effects. So, there was a spot of swapping between Ubuntu and Windows (running on VMware) while I was increasing font sizes to make legibility better on the Linux side without things going all Blue Peter on Windows. Along the way, I added a mention of the Ubuntu font ae_AlArabiya in the CSS to further spruce up things. In my earlier web building efforts, I was having to make serif fonts bigger because of those serifs. From the on-screen legibility point of view, there’s a lot to be said for sans serif fonts and I may yet alter this blog’s theme to use them instead but I’ll ponder the idea a bit more before taking the plunge.

A matter of fonts…

It’s when you pop from one operating system to another that you realise how operating system specific it is that fonts are. For instance, only one of the names in the following list are understood by Firefox on Ubuntu, the last one: Trebuchet MS, Lucida Grande, Verdana, Arial, Sans-Serif. The reason that San-Serif is understood is that it’s a general font class name in the world of CSS. However, that does not mean that you still are not at the mercy of operating system fonts. In fact, font sizes vary and 16px in one font isn’t the same as 16px in another; that can mean broken layouts if you are sufficiently clumsy.

As it happens, the main menu bar on my hillwalking blog should all fit on one line but it took up two lines when viewed on Linux. If it did that neatly, there wouldn’t be much of a problem but it didn’t. Some CSS hacking could have repaired the situation but I went for a simpler solution for now: picking a Linux sans serif font that fitted the bill better. So popping in mentions of "Nimbus Sans L" in appropriate places in my stylesheet was the way that I went. I don’t know how this appears in other Linux distributions but the wonders of virtualisation should allow to find out.

If I was really concerned about the fonts that were being used, I could have gone with a server-side approach: embedded fonts. I haven’t tried this for a while but differing browser support was a major issue when I did: you had to create a set of files for IE and for Netscape when I was investigating such things, hardly convenient even in those days when Opera was merely a speck on the horizon and Mozilla was nascent. It’s a valid approach for those exclusive fonts but so is questioning why you are using them in the first place. Adobe’s Flash is another option for those who obsess with fonts though how users take to this remains an open question, as does the accessibility of the approach.

I will be sticking with testing how things look in different operating systems and virtualisation is an excellent enabler of this, as are Live CD’s. The latter is particularly useful for Linux distributions which the former has application with more scenarios: names OpenSolaris and, with a spot of tinkering, OS X come to mind. It sounds like an intriguing proposition and Firefox is virtually a de facto cross-platform standard these days anyway. Mind you, seeing how websites are rendered by Safari running on OS X might be of interest to some.

Looking at from the user’s point of view rather than the web developer’s, there remains a question regarding the visiting of websites that break because of the font conundrum. If you find this happening to you a lot, it may be an idea to bring in some TrueType or OpenType fonts. With Ubuntu, this is straight forward: fire up Synaptic, search for msttcorefonts and install that package along with any of its dependencies. Logging off from and on to the system will make the new fonts available. There was a time when more work was needed than that…