Generic font families
Please raise comments on this wiki page by following this link.
The following suggestions are based on a survey of over 800 fonts available on macOS and Windows11 platforms, Noto fonts, and SIL fonts at the Font Lister page.
That page groups font faces into categories which could be considered as an initial set of new generics in CSS. The idea is that if you specify a generic font setting and there is a font on your system that belongs to that category, you would not want the fallback replacement font chosen by the browser to be from a different category.
These new generic font choices have practical consequences and apply in situations where your browser could cause readers problems if it falls back to a random font: either because different fonts are conventionally used to distinguish one part of text from another (eg. headings from body text,), or because the text may become unreadable with the wrong font (eg. non-nastaliq styles in Kashmir). It's more than just presentational preferences, and doesn't affect font styles within a given font, such as italic, bold, etc.
The proposed initial categories are based only on the pre-installed (or in some cases downloadable) fonts on a Mac or Windows, plus Noto fonts (which are often also preloaded on an OS) because these are likely to be available to most people.
The Font Lister page also includes other categories which are not in the proposed list below, but which may not be worth standardising at this point, although it should always be possible to add new generic styles as our understanding of orthographic needs develops. Such additions may be driven by examining fonts other than the sytem and Noto fonts under consideration here.
The initial proposal for discussion is as follows:
serif
sans-serif
These are already well-established generic styles which, in the Font Lister page, are named 'modulated' and 'monoline', respectively. In that page serif styles are also listed as 'Song' for Chinese (sometimes called 'Ming'), and 'Mincho' for Japanese. Sans-serif styles are also listed as 'Hei' or 'Gothic' for Chinese, Japanese & Korean. The generic font names should continue to use serif and sans-serif for these CJK orthographies. These categories also include naskh fonts for the Arabic script. Fonts that don't fall into one of the named categories that follow will fall under either serif or sans-serif categories.
fangsong
For Simplified Chinese. This style lies between Song and Kai. Fangsong is often used in literary works and ancient books, while Mainland China stipulates that the official documents of the government should use Fangsong in principle. Fangsong can also be used with other typefaces. It is commonly used in secondary titles and isolated paragraphs such as quotations or highlighted sentences.
Font lister examples: SC
kai
Simplified & Traditional Chinese. A major typeface, which provides calligraphic styles for Chinese text. It shows notable handwriting features. Kai is commonly used in official documents and textbooks. Most official documents in Taiwan use Kai in full text. Kai can also be combined with other typefaces to be used in text that needs to be differentiated from the rest of the content, for example, headlines, references, quotations, and dialogs.
Font lister examples: SC • TC
loopless
Used for Thai. Loopless is considered to be more contemporary and modern than looped fonts, and is mainly used for advertising and titling. The distinction doesn’t necessarily map to that of serif vs sans – Noto, for example, provides both serif and sans Thai font faces, but they both have loops. On the other hand, Neue Frutiger Thai offers traditional (looped) and modern (loopless) alternatives as part of the same font family (each with both regular, italic and bold substyles).
Font lister examples: Thai
ruqa
Arabic style. Designed for use in education, in official documents, and for every-day writing. It is known for its clipped letters composed of short, straight lines and simple curves, as well as its straight and even lines of text. It is a functional style of writing that is quick to write and easy to read. It also doesn’t extend baselines, like a naskh font does. In 2010's rebranding of Amman a ruq'ah font family was created to serve as an italic face. Monotype has an interesting article on the development of ruq'ah.
Font lister examples: Arabic
kano
A common way of writing Hausa in Nigeria in the ajami script. Like other East African writing it is based on Warsh (Warš) forms, which incorporate Maghribi characteristics. Some sources describe an alternative Hafs (Ḥafṣ) orthography, used with hand-written adaptations for the newspaper Al-Fijir.
Font lister examples: Arabic
nastaliq
The standard way of writing Urdu and Kashmiri, and is also often a preferred style for Persian and other language text, especially in literary genres such as poetry. Key features include a sloping baseline for joined letters, and overall complex shaping and positioning for base letters and diacritics alike. There are also distinctive shapes for many glyphs and ligatures. It is important not to fall back to a naskh style for languages such as Urdu and Kashmiri.
Font lister examples: Arabic
kufi
The original style used for the Koran, but is not used for newspapers or official content today. However, it is used in modern content for logos and other stylised applications.
Font lister examples: Arabic
rashi
Hebrew. A typeface based on Sephardic semi-cursive handwriting and used for biblical commentaries. Letters have a more rounded, almost cursive style, that contrasts with the main text, which uses the modern square script.
Font lister examples: Hebrew
syriac-estrangela
This and the following two related categories identify visually distinct writing styles that occur within the same script and that are significantly different and intentionally selected for particular languages or applications. This division is much more important to get right than distinguishing between modulated and monoline styles, and so these three include all Syriac fonts. All ancient manuscripts used Estrangelo. West and East Syriac text uses it for headers, titles, and subtitles. It's also the current standard for Western scholarship.
Font lister examples: Syriac
syriac-eastern
Used for East Syriac and Swadaya (Aramaic) texts, and in West Syriac texts for headers, titles and subtitles.
Font lister examples: Syriac
syriac-western
Used in West Syriac texts, Turoyo, and Garshuni (Arabic written with Syriac).
Font lister examples: Syriac
lanna-thai (a better name may be available)
For use with languages such as Northern Thai written in the Lanna (Tai Tham) script. Like the Syriac styles just listed, this style of font is not typically used for writing Tai Khün, and browsers should fall back to this style of font if the language is Northern Thai. The glyphs are typically modulated, with finer details than the Lanna Khün style, and a few characters have very different shapes from those in the Lanna Khun style.
Font lister examples: Tai Tham
lanna-khun (a better name may be available)
For use with languages such as Tai Khün written in the Lanna (Tai Tham) script. Like the Syriac styles just listed, this style of font is not typically used for writing Northern Thai, and browsers should fall back to this style of font if the language is Tai Khün (and tbc Tai Lü). The glyphs are typically monoline and generally more rounded (like Myanmar) than the Lanna Khün style, and a few characters have very different shapes from those in the Lanna Thai style.
Font lister examples: Tai Tham
slanted
Used for normal text in scripts such as Tamil, Armenian, and Khmer. This is not the same as obliqued text; it is applied to all the text, or to set off distinctive parts of the text.
Font lister examples: Armenian • Tamil
mool
Used in Khmer. Has heavier, more rounded letter shapes, and includes more ligated forms. It is commonly used for titles and headings in Cambodian documents, books, or currency, as well as on shop signs or banners. It may also be used to emphasise important names or nouns. The regular font weight looks like bolded text in comparison to the upright font style.
Font lister examples: Khmer
unjoined
Used for Adlam and N'Ko scripts. Adlam and N'Ko are usually cursive, ie. letters in a word are joined up, however a non-cursive writing style is sometimes used, mainly as display fonts for books and article titles as well as educational content (because the unconnected script is easier to learn).
Font lister examples: Adlam • N'Ko
heavy
A number of scripts have fonts with thicker and darker strokes than normal text. This category is suggested as one that is not restricted to particular scripts or languages, and sits alongside generic styles such as fantasy, etc.
Font lister examples: Arabic • Devanagri • Khmer • Korean • Thai etc.
Other styles that may be relevant Hmong languages written in the Pollard script are generally written with an approach to tone and voicing that is different in the orthography of around 1936 (which is still in common use today), and the reformed orthography of 1988. See examples.
Users should be able to indicate to the browser what other fonts they have on their system that would fall into a particular generic category. A few examples of such fonts are given below.
loopless: Kanit, Prompt, Sriracha, …
nastaliq: Jameel Noori Nastaleeq, …
syriac-estrangela: Estrangelo Antioch, …
syriac-eastern: East Syriac Adiabene, …
syriac-western: Serto Jerusalem, …
lanna-thai: Hariphunchai, …
lanna-khun: A Tai Tham KH New, …
slanted: Titus Armenian, …
mool: Khmer Mool, …
The following are just my personal ideas about how to implement these new generic font families for users.
My hope is that the browser implementers would set some default fonts for each generic (based on system fonts), but that users would be able to override those defaults and choose their own preferred font for use with a given generic. This could be exposed via settings, such as we already have for setting serif and sans-serif, etc preferences in the browser.
The following picture shows my settings in Firefox for Latin text, and i could imagine just extending the select boxes to incorporate the new generics.
I would expect that there would be some location where the available generic font styles are listed. This could be a registry, but it may be perfectly fine to just list them in the CSS Fonts spec as we do currently.
The following is not an exhaustive list, but it points to a number of discussions on the CSS GitHub thread related to extending generic font families.
- Criteria for generic font families
- generic font families may vs should map to multiple concrete font families
- What does fangsong map to for non chinese text
- Specify what generic font family maps to nastaliq
- Selecting generic fallbacks
- generic font families may vs should map to multiple concrete font families
- The Cursive = Chinese Kaiti equivalent
- Proposal for a new generic font family "Rounded"
- Should we start a registry for additional generic fonts?
- which generic in a font-family list influences system fallback?
- How to add new generic font families CLOSED
- Do generic fonts resolve to a single font face value? CLOSED
See also descriptions of generic font families here and here in the CSS Fonts spec Editor's Draft.