The One with the Thoughts of Frans

Nowadays, the most obvious way to blend all kinds of UTF-8 characters in nicely with all the other text on your page might be Webfonts, but I think there are definitely valid reasons not to utilize those to achieve consistent display of IPA characters on a page. This post will focus on a very simple method which ensures that IPA will look decent across a variety of operating systems and browsers. The issue is nothing but aesthetics; however, the importance should not be underestimated as the following screenshot will demonstrate.

You can try the results of this yourself, but what it will look like depends on the fonts you have installed.

What I used to achieve the cohesive look of the IPA characters is this simple line of CSS.

.IPA{ font-family: "DejaVu Sans", "Lucida Grande", "Lucida Sans Unicode" }

It’s an easy concept. Slap class="IPA" on some element—I used SPAN—and it will automatically display in one of these fonts, ensuring that no characters look out of place. DejaVu Sans is a font I like a lot; It comes pre-installed on most Linux installations, and is freely available for everybody else. Lucida Grande is a font with the sufficient characters that comes with Mac OS X, and Lucida Sans Unicode is a font that, as the name implies, is very similar to Lucida Grande. It is available in Windows 98 and up.

References

“DejaVu Sans.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=DejaVu_fonts&oldid=329693253>.
“Lucida Grande.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=Lucida_Grande&oldid=314108882>.
“Lucida Sans Unicode.” Wikipedia: The Free Encyclopedia. 12 Dec 2009 <http://en.wikipedia.org/w/index.php?title=Lucida_Sans_Unicode&oldid=324714228>.