RSS icon Home
  • In search of a better serif font - []

    Dec 26, 2013 00:28 fonts web 宋体 readability Charis


    Right, as you may have noticed this is my very first post for this blog that is written in English. The motivation of having some non-Chinese content here is quite simple: I have promised a German friend to include some Latin characters on my blog, and I have always had the desire to write in English, trying (almost always in vain) to exploit my limited mental lexicon to its full potential.

    I feel it quite natural to write about something I’m enthusiastically interested to begin with, so let’s talk about font. I’m pretty sure a large portion of the readers for this post totally don’t care how the pages are displayed in the browser—or they do but just don’t have a clue of what a good font is like. So before we get down to the nasty main event let’s poke a bit into the broad topic of font display and font rendering, aka “How does font affect our feelings when we read a webpage?”

    Now, to Chinese readers: if you haven’t configured your browser to render webpages in the way you like, here in terms of the fonts to be used, a Wikipedia page may look like the following in your browser:

    Problematic Wikipedia page display in browsers in Chinese language Windows OS

    The page looks quite ugly (stupid, inelegant, poorly proportioned, unnatural … whatever negative adjectives you may think of). But I have seen dozens of cases (in the BFSU library) in which students (and teachers, of course) read Wiki articles IN THAT DISPLAY.

    Nonetheless, for users whose native language is English the page won’t be rendered in this dull and clumsy Chinese font called SimSun but again I have seen quite a number of screenshots showing pages displayed like the following:

    Problematic page display using Times New Roman

    One may wonder whether there is anything wrong with this display. Frankly speaking, there is nothing obviously unsuitable to render a page using Times New Roman, as shown above, but don’t you feel the characters (call it ‘glyph’, this makes you sound like an expert) are smaller than your expectation? Besides, if you read screens and screens of text in this small New Roman print, I bet you’ll have to start to cope with fatigue, because Times New Roman is a font too serious and formal to be used on webpage contents, and because this font is not designed to be used for on-screen display from its very origin.

    We have seen that incorrect font selection may affect our feelings and emotions to the activity of webpage reading. Unfortunately the default font settings of every browser exhibit this problem.

    If you use an English language operating system, your browser has the font settings defaulted to three typefaces, whatever brand it is and whatever Windows system you run on—for compatibility reasons. They are, namely, Arial, Times New Roman and Courier New. On Macintosh and Linux systems the font names may be different and look slightly better, but they appear generally the same. Let’s stick to the M$ platform for this post. Now, you may have noticed that Arial, Tms New Rmn and Courier New are totally different font styles. You may have noticed in your daily usage that the former two have variable width for different glyphs: very narrow space for “i” and very wide space for “W”, compared with the unvaried width in Courier New. We call the former two proportional fonts, and the third fixed-width font. A majority of webpages are displayed using proportional font, but for those with lines of program codes, data spreadsheets or text with regular patterns, fixed-width fonts are favoured. Furthermore, Times New Roman differs from Arial in that there is more decoration to the strokes of the character in Roman—we call it “Serif” (a smaller line used to finish off a main stroke of a letter). We have very good reason to argue that this is a French word because Arial is called a “Sans Serif” font in which “sans” is the French equivalent for “without”.

    Now, if you are a Chinese OS user, things are more intricate. Browsers that focus on mixed-language support (call it “internationalization”, this is more expert sounding) have the previously introduced typefaces as the default font for Latin scripts (roughly equal to European languages), and the serif font SimSun (宋体) for Chinese scripts. For browsers that focus more on simplicity, SimSun is used for all scripts. If you use Chrome or chrome-based navigators, you belong to the second group, unfortunately, and run into Wikipedia pages displayed in SimSun all year round (similar issues on Chrome from SuperUser, GoogleCode Feedback, and a personal weblog).

    But why SimSun is so disappointing a font, you may ask? SimSun is a fixed-width font first developed in 1990s for Windows 3.2. Without SimSun (and its variants) early Windows systems won’t have Chinese display, so SimSun was really a nice thing for Chinese users back at that time. The problem is nothing has been done (even in its latest version) to polish its glyph outlines in the following decade, so many Chinese computer users are virtually reading content displayed in a font that looks not too much different from those poorly crafted dots and pixels used in pre-XP era. It isn’t difficult to find epigrams against the use of SimSun on the web (check some of them here, here, here and here). Here I would list only a few of its major defects.

    SimSun …

    SimSun: defects

    Defect Nº 1, 2, 6, 7, 8 and 9 has made SimSun a no-no for ideal serif font display. Sadly and sarcastically un-tuned browsers (and part of Windows) still use SimSun as the default font. The reason for the always-questioned-but-never-contended popularity of SimSun is, from my own opinion, three-pronged. First, SimSun has been pervasive in printed publications and on formal occasions since before 1900. Second, although SimSun has been infused into Chinese typography, there aren’t many fonts available even nowadays that are suitable for displaying web content—font that read well both under small sizes and large sizes. Third, licensing is expensive for Chinese fonts. You buy a Chinese font and you buy a huge collection of thousands of characters.

    Comparatively, there are fewer issues with Times New Roman, but I can still list several defects that make it not the ideal font for use on the Web.

    Times New Roman …

    Tms Rmn's Defects

    One may also wonder why Times New Roman has survived all these years with these defects. In the early days of computing there aren’t many fonts available. Programmers looked at weirdly crafted display characters that are basically lines and dots put together to “resemble” a character; no font is actually used. But laser printers and primitive WYSWYG word-processing software called for computer fonts, so a limited set of fonts were developed for that purpose, among them Times New Roman. So basically we have Times New Roman on computers because we have it in print. This is different from contemporary fonts, like Calibri or Segoe UI featured in Win7, that are created for computer display. To discuss about the difference between fonts designed for print and for computer display requires the space for another long article so we will just skip it.

    Alright, you have spent quite some effort understanding why you don’t really like a Wiki article to be shown in SimSun or Times New Roman. Right now you may have already started wondering what constitutes for a good, if not “perfect” or “ideal”, font for webpage display. Before we continue, please allow me to enlarge your specification of purpose from solely “webpage display” to “webpage display and word processing”. There are good reasons to do this: you both face bulks of text for these two activities every day, and both tasks demand good readability and high efficiency all the time.

    Let’s posit a few requirements for a qualified font, and list them as follow, a good serif font for webpage display and word processing should:

    1.      Be proportionally spaced

    2.      Be adequately sized

    3.     Be clearly distinguishable of its characters, esp. those with accent markings

    4.      Be swiftly readable in long, bulky text blocks

    5.      Exhibit smooth curvature and harmonious serif

    6.      Retain its beauty and elegance for all font sizes

    7.      Be compatible across platforms and programs

    8.      Provide a large character set which includes glyphs for not only one family of language but several

    9.      Infuse modern typographic technology (e.g. supports combining forms, ligatures, hinting, Graphite)

    10.   Have a free-for-personal license, or is bundled with software programs

    This criteria list is not at all exhaustive and referential, but it may work as a guideline for our selection of a better serif font. In other words, whatever font that conforms to this guideline is qualified for our collection of good serif font. Criterion 1 to 6 resolves problems exposed in current default fonts used by browsers whereas 7 to 10 are additional criteria which are crucial to a comfortable and efficient reading experience for web-surfing and word-processing.

    You may have started to ask, by this stage, what are the possible sources where our potential ideal font would exist. Normally, one of the best ways to find a font is to visit typography dedicated websites. However, these websites are targeted at designers who from time to time need to find (or download) a suitable font for a surface design. This means the fonts on these websites mainly come with three flavours: highly artistic making them unsuitable for webpage display, supporting a limited character set making them incompatible for internationalization, or requesting a very expensive license fee to be incorporated into your browser. These flavours have violated our criteria for a good font, and these font cataloging websites, therefore, are not the best place to go for our mission.

    Neither will you find it helpful to conduct Google search. You have to scratch your head and establish several candidate expressions which are to be tried out one by one before getting satisfactory, or at least meaningful, results, if any. Yes there may be a number of Q&A's or forum discussions on these matters but ask yourself do they really help? Do the people who posted provided some criteria for their choice of fonts? Is there any comparison? Filtering out search results using these questions may be too time-consuming.

    In fact you can find such kind of fonts the other way: by looking into your own operating system. Few readers here have a grasp on how many fonts are installed on their PC. I believe many of you never try out those oddly named typefaces. So now it’s time to go to the Fonts folder in your Windows directory and explore the wondrous world of wonderful fonts that had never ever got a chance to show themselves.

    When you browse through the fonts in the folder, remember to switch to “detailed” view instead of thumbnail or icon tiles. In Windows 7 you can have more detail information of each font by selecting the relevant columns shown in the pop-up menu when you right-click on the column headers. Furthermore, you can do some simple filtering in Windows Explorer, which is really a smart and nimble hack. (XP users: your OS is outdated, I don’t know why you love your age old XP so deeply.)

    Windows 7 fonts folder

    The following is my filtering settings when picking a font candidate from the Fonts folder:

    •  Font style: Normal
    •  Designed for (character set): multiple language families including Latin, or blank. Some fonts do not fill this field because they support a much larger character set than other fonts.
    •  Category: Text. Do not confuse the meaning of “Display” here (which is a technical term) with that used in “fonts suitable for on-screen display”.
    •  Font type: Opentype prioritized. Truetype acceptable.

    You may need to take notes for all potential candidates. I used Excel for my convenience. A fairly long list may be generated using these simple criteria. However not all of them are really qualified for our purpose if you view them in the Windows Font Viewer: some do not distribute the glyphs properly; some have too much line spacing; and some have idiosyncratic outlines for certain glyphs. My list is reduced to around ten after this second filtering.

    Having visited our system repertoire of fonts, please allow me to introduce you to some other sources. You may have noticed that our criteria for an ideal font involve several technological concerns (7, 8 and 9). More emphasis is also put on general usability (esp. 3, 6, and 10). These characteristics imply that we can turn to IT companies rather than design companies for our Font Right. This means leaving font products from firms like Adobe aside. Our requirement for a free license further indicates that open-source solutions may be the right sources to search in.

    Now things might be easier: you search for “open source Unicode fonts serif” or “free Unicode fonts serif”, with phrases like “screen”, “display”, “legibility” as optional conditions, feed them into Google and follow the pages that interest you. You may also be interested in Wikipedia pages on typography—it actually hosts a number of high quality articles explaining the myths behind typefaces and listing all popular open source fonts. You would find a range of possible solutions from this approach, to name just some of the most well-knowns: Bitstream Cyberbit, DejaVu Fonts, TITUS Cyberbit Basic, SIL Fonts, Code2000, Droid Fonts, Ghostscript Fonts, and Liberation Font, and Noto (found while preparing for this post). There is even a page dedicated to the collection of Unicode Fonts.

    So far we have covered quite a few topics. I hope you are still following me :-). You have gained some initial knowledge of:

    •   What are proportional and fixed-width fonts
    •   What are serif and sans serif fonts
    •   Why Times New Roman may not be a good choice for reading webpages and word processing
    •   Why SimSun (宋体) prevails in Chinese computer users despite of its ugliness
    •   What criteria should be considered when choosing a font which is ideal for dealing with bulks of text
    •   How to view font information installed on your Windows PC
    •   How to find free fonts that you want

    Meanwhile, you have also generated your own list of font candidates. I guess you are having 20 or 30 of them. Our task now is to pick out the best one(s). To do this, you need to do two things: first, check out information for this font, including glyph counts, Unicode coverage (the range of characters this font supports), latest release date, and release notes; second, download the font and try it out in browsers and word processors to see if it matches your taste. Note that you shall not trust Wikipedia’s introduction of the font all the time because it may not be the latest situation. Also, don’t forget to preview the fonts using various sizes from 8pt to 18pt; this process might reveal rendering issues with the font.

    Finally, I would like to share with you my personal choice for the ideal serif font to be used for webpage display and word processing. I picked Charis SIL from several other candidates because:

    •   Charis SIL offers a fairly wide Unicode coverage (see SIL’s official documentation for more information)
    •   Charis SIL shares many features of Georgia but with improved readability. Georgia is a classic font optimized for both print and screen display, and has been used by ZDNet as the font used for article title and navigation bar.
    •   Charis SIL is developed using multiple modern typography technology.
    •   Charis SIL works perfectly well in Microsoft Word when page grid lines are disabled.
    •   Charis SIL looks great in PDF viewers, just like professionally created documents.
    •   Charis SIL works well both under small resolution and large resolution.
    •   Charis SIL is recommended by IPA as the choice for displaying phonetic symbols. Since I am a linguistics student this comes as a very helpful recommendation.

    There are problems with Charis SIL, nonetheless: capital letters vary in height and numbers forms are not so elegant as Times New Roman or Cambria, but so long as Charis SIL works for me, keeping me happy and satisfied even when dealing with thousands lines of text, I would use it as my default serif font.

    If you do not know how to change fonts in the web browser, you really need to learn more to avoid becoming computer illiterate. For Microsoft Internet Explorer, the font panel is entered by clicking on the “Fonts” button under the “General” tab of the “Internet Options” dialog triggered by clicking on “Options” in the “Tools” menu from the Internet Explorer. For Firefox, things are much the same, except that it is located under the “content” tab. For Chrome, go to chrome://settings, click on “advanced settings” at the end of the settings page and you’ll find it. For Opera, press Ctrl+F12, switch to “advanced” tab, and there it is.

    I would wrap up this long post with lyrics of the song “Midnight City” by M83, displayed in Charis SIL, 12pt, and an excerpt of the Declaration of Independence shown in 10pt Charis SIL.

    M83 - ‘Midnight City'


    Excerpt from Declaration of Independence

    ~ End ~