Teaching and Learning with Technology

Computing With Accents and Foreign Scripts

Skip Menu

Suggested CSS Font Styles

If in doubt, it is best to leave the font specification blank. But for some situations, it may be possible to include a few options, especially for serif text.

Thanks to Nicholas Shanks for his technical assistance.

Table of Contents

  1. Sans-Serif: Arial Unicode MS and Lucida Unicode/Apple Symbol
    1. Note on "Times New Roman" and "Arial"
  2. Serif vs. Sans-Serif
    1. Serif Phonetic Characters
    2. Serif Old English
    3. Serif Latin Long Marks
    4. Serif Cyrillic
    5. Serif Polytonic Greek
  3. Math Symbols
    1. Default Fonts
    2. Note on "Symbol"
  4. Other Scripts
  5. CSS Buttons

Sans-Serif Fonts: Arial Unicode MS and Lucida Grande

Both Microsoft and Apple provide sans-serif fonts which include a wide variety of diacritics, ancient letters and alphabetic scripts. These are:

If you want a site to smoothly incorporate these symbols into the rest of your site, you can use CSS to specify

.utf8sans {"Lucida Grande","Arial Unicode MS", sans-serif}

Top of Page

Note on "Times New Roman" and "Arial"

In the Windows version of the Times New Roman font actually includes Cyrillic characters, Greek characters and other blocks, but the same is not alway true on the Macintosh platform (Mac users may have differing versions of these fonts).

Therefore, if you just specify "Times New Roman", a site may be unreadable on other platforms such as a System 9 Macintosh. The same note applies to other Windows fonts like Arial, Georgia, Verdana and other Microsoft fonts.

Top of Page

Serif CSS Styles

Serif vs. Sans-Serif

Although sans-serif fonts are generally recommended for general text, for specialized symbol fonts (e.g. phonetic symbols, math symbols, ancient languages) the convention has been to use serif fonts in scholarly pubications, and many scholars using these symbols may actually prefer serif fonts instead of sans-serif fonts.

Because the convention of serif fonts for symbols has been so dominant, many academic institutions have devleoped serif fonts for academic content on the Web. The following styles include specifications common freeware serif fonts.

Top of Page

Phonetic Characters

There are several freeware fonts with a full range of serif phonetic characters, and linguists may be aware of them. Specifying these special fonts will ensure that pages are more readable. However it is important to specify "Arial Unicode MS" for users of Internet Explorer; otherwise the default will probably be Times New Roman which does not include these characters.

.serifphon {font-family: "Doulos SIL","Charis SIL", "Gentium", "TITUS Cyberbit Basic", "Arial Unicode MS", serif}

Font Sources

Note: The phonetic fonts above contain standard Homeric Greek letters, but only TITUS Cyberbit Basic contains archaic Greek letters and Coptic extensions.

Top of Page

Old English

Many fonts contain symbols like ash (æ), eth (ð) and thorn (þ), but not necessarily wynn (ƿ), long ash (ǣ) or long y (ȳ). The Medieval Unicode Font Initiative designed the Junicode font to cover these gaps (plus Germanic runes), but other fonts like Cardo, TITUS Cyberbit Basic, Gentium, and Doulos SIL also have these characters.

.serifoe {font-family: "Junicode", "Cardo", "TITUS Cyberbit Basic", "Doulos SIL","Gentium", "Arial Unicode MS", serif}

Font Sources

Top of Page

Latin Long Marks

The fonts listed in the Old English section above all display Latin long marks, but so do Windows Times New Roman, Windows Georgia.

On the Macintosh, only some fonts supplied from Apple (e.g. Times) contain the Latin long marks. However, all the "CE" (Central European) fonts such as "Times CE" or "Palatino CE" also contain the Latin long marks.

In general, it's better to specify the more unusual Macintosh font first. Because it's missing in Windows, they will default to Times New Roman instead.

.macronserif {font-family: "Times CE","Times", "Times New Roman" sans-serif}
.macronnoserif {font-family: "Helvetica CE","Geneva CE", "Arial", sans-serif}

Note: This same specification can also be used for Central European languages like Hungarian, Polish and Czech.

Cyrillic Text

Fonts like Times New Roman and Georgia contain Cyrillic characters in Windows, but on a Macintosh, they may be only included in the "CY" Cyrillic fonts from Apple like "Times CY".

.serifcyr {font-family: "Times CY", "Times New Roman", serif}
.noserifcyr {font-family: "Geneva CY", "Helvetica CY", "Arial", sans-serif}

Polytonic Greek

Several fonts have support for polytonic Greek and some also support Coptic letters. These include:

Font Sources

In addittion, Arial Unicode MS from Microsoft and Lucida Grande from Apple also include polytonic and Coptic.

.serifgreek {font-family: "TITUS Cyberbit Basic", "Cardo", "New Athena Unicode","Galatia SIL","Gentium", "Arial Unicode MS", "Lucida Grande"}


Math Symbols

Default Fonts

The following fonts from Microsoft and Apple include a large repertoire of mathematical symbols

The suggested CSS Style would be:

.mathsym {"Chrysanthi Unicode ","Apple Symbols", "Arial Unicode MS"}

If you wish to include Greek symbols in the specification, you can try this style:

.mathsymgreek {"Chrysanthi Unicode ","Apple Symbols","Times New Roman", "Arial Unicode MS"}

Note on "Symbol" Font

If you are typing mathematical symbols, using the Symbol font is no longer a safe option. New versions of Symbol are Unicode compliant, while older versions are not. Thus, a font specification style like <span style="font-family:Symbol">S</span> could be rendered as either sigma (Σ) or capital S depending on which type of Symbol font is on a user's machine .

Non-Western Scripts

Font Size

When working with many East Asian or South Asian scripts, it is worth setting the default font size to one larger than one might use for a Western script.

Font Face

Unless you have a very specific formatting goal in mind. it's best to avoid specifying a font when working with a radically different script such as Chinese, Japanese, Korean, Arabic and Hebrew

As a general rule, Microsoft and Apple each supply their own fonts for the major scripts and modern browsers are configured to recognize them.

If you wish to select among the options provided by each vendor, make sure your CSS style includes a target font from Apple and another from Microsoft. View the By Language page to determine which fonts are available then specify your styles accordingly.

.majorscript {font-family: "APPLE FONT HERE", "MICROSOFT FONT HERE"}

Undersupported Scripts

The fonts Arial Unicode MS (Microsoft) and Lucida Grande (Apple) include a large set of characters, but if you wish to change the default to a third-party font, you can include the target font first, then include Arial Unicode MS as a backup (unless it's missing the characters).

.otherscript {font-family: "THIRD PARTY FONT HERE ", "Arial Unicode MS"}

It is also recommended that you link users to specific fonts they can download. View the By Script page to determine which fonts are available then specify your styles accordingly.



CSS Buttons

If you are using a well-supported script like Chinese, Japanese, Korean or Russian, then you have the option of leaving the content as text and adding CSS tags to make them appear like buttons. See the Cyrillic example below:


<p class="fakebutton">ПСУ</p>

.fakebutton {color: #69F; font-weight: bold; font-size: xx-large;
font-family: "Times CY","Times New Roman", "Times", serif;
background-color: #009; padding: 5px 10px; margin-left: 30px;
border: 4px solid #69F; text-align: center; width: 100px;}

Last Modified: Tuesday, 28-Mar-2017 15:02:45 EDT