IPA Fonts on the Web

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.

ipa-font-test
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>.

Leave a Comment

You must be logged in to post a comment.