The other day, I checked out the web interface to the database of in-patient care diagnoses run by Swedish Socialstyrelsen. On first opening the site, it looked broken and unusable – the text was basically unreadable, mixing giant numbers with strange- looking regular characters, lines of text overlapping each other, and a general sense of being totally chaotic. That is not what you or I would expect from an official site of a government entity. They have no reason to play games with the look of the site. So how come it was all that broken? Didn’t they test the site properly under all circumstances?
Here is the initial impression on my computer:
That Looks Weird, hit F12
When something like this happens, the obvious first step is to hit F12 and bring up the web inspector tools in Firefox. Highlighting some text reveals that the style sheet has been coded to use the Futura font in preference to common standard fonts like Arial, Helvetica, and generic sans-serif. Sounds like the designer was trying to make the site look good by using a more interesting font. But they seem to have failed miserably. Did they ever test this with the font installed? Or did they just insert the font name without testing (copying the style sheet from some other page, who knows)?
The conclusion that leaps to mind is that whoever set that font sequence did not have Futura installed, and everything looked fine for them. Indeed, I wonder if an average developer would be thorough enough to test that all the specified fonts work right by installing and uninstalling fonts on their test machines to isolate each one in the list in order.
Problem Solved
Simply uninstalling the Futura font from the affected computer solved the problem. Web site became usable, with no negative side effects. The computer with the problem was a pretty old Windows setup, and the font must have been installed a long time ago for some graphics design work (or something like that).
The web page looked fine and was back to being usable:
That Futura Looks Weird
That could have been the end of the story… but something did not seem quite right. And when something does not seem quite right, keep digging! Why? Since I had not asked why enough times!
Once upon a time I took a course in “lean manufacturing”. The only thing I really remember from that course is the principle of Five Whys – and its underlying idea of not just stopping because you appear to have solved a problem. It is a simple yet profound way to think about problem solving.
I love the principle. In my experience, even when you think you have solved a problem, there is often some deeper underlying problem or issue. It really annoys me when people just stop and move on when something seems to be solved at the level of the currently observed symptoms. Dig on! Who knows if the problem comes back in a different form? Was the problem actually solved, or just accidentally worked around? Solving problems right is the right thing to do, and honestly – from a purely intellectual perspective, there is often a much more interesting story to be found if you keep digging. I like those stories.
In this case, the obvious follow-up question to ask is why the Futura font looks like that in my web browser. Especially the number glyphs are totally bizarre. Is that a problem with the web browser?
Checking the font in the Windows font inspector reveals something quite odd:
Note the totally unproportional look of the numbers. Extra tall. Note the punctuation that is below the baseline. It seems that this font is some strange mashup of two different renderings of Futura. And some of the letter shapes do not seem to match other variants I have seen.
My Own Fault, After All
That last discovery makes it clear this was my own fault, after all. The web developer probably did test with Futura – but their machine would have had a proper version of the font installed. It is asking a bit much for the page to be tested with every random font someone decided to call “Futura”. Clear case of “user error, nothing to be fixed”.
Or Maybe Not My Fault
However… it is possible to dig on. The next level of why would be to ask why the Futura from my local machine was used at all. Just specifying fonts in a style sheet puts your page at the mercy of whatever a user have installed on their system. I guess Arial or Helvetica are pretty reliable, but really for anything else the page should use a web font to ensure that the user sees the page as it was designed to be seen.