Jump to content

Design/Archive/Wikimedia User Interface/Use cases/Font family stack

From mediawiki.org

This file documents the fonts used in MediaWiki, their defining features and some of the reasons to choose them.
The related task: Document WikimediaUI Base’s font stacks, the research and reasons for each choice.
Also see task: Typography: Define a font stack for monospace fonts.
These choices are codified in WikimediaUI Base variables and have later been codified in Codex as design tokens as well.
To use Codex design tokens in a skin: @import 'mediawiki.skin.variables.less';

Discussions, research

[edit]

Implementation details

[edit]

Resources

[edit]

Fonts used and researched

[edit]

Some fonts are specific to skins, not part of WikimediaBase UI.

Sans-serif fonts for article (variable @font-family-system-sans)

[edit]
  • system-ui – Removed, see https://phabricator.wikimedia.org/T175877#4776576
  • -apple-system (‘San Francisco’) – Safari 9+ macOS and iOS, Firefox macOS.
  • ‘BlinkMacSystemFont’ (‘San Francisco’) – Chrome 48+ macOS and iOS.
  • ‘Segoe UI’ – Windows Vista & newer, intended to improve the consistency in how users see all text across all languages.
  • ‘Roboto’ – Webfont, Android 4.0.
  • ‘Lato’ – designed for a Bank, Wikimedia Design choice, OFL licensed.
  • ‘Arimo’ – Removed, see https://phabricator.wikimedia.org/T65512 “Typography refresh body type renders incorrectly in Windows”, patch.
  • ‘Liberation Sans’ – Removed, see https://phabricator.wikimedia.org/T65512. GNU+Linux, metrically compatible with Arial. Used by Timeless skin.
  • ‘Noto Sans’ – Webfont, extended language support. Used by Timeless skin.
  • ‘Helvetica Neue’ – Removed, see https://phabricator.wikimedia.org/T63470 “Helvetica Neue cannot render some combining characters correctly”. Used by Timeless skin.
  • ‘Helvetica’ – Generic.
  • sans-serif – Platform default: Arial on Windows.

Serif fonts for heading (variable @font-family-system-serif)

[edit]
  • ‘Georgia’ – Windows, intended as a serif typeface that would appear elegant but legible printed small or on low-resolution screens.
  • ‘Linux Libertine’ – GNU+Linux, alternative to Times New Roman.
  • ‘Liberation Serif’ – GNU+Linux, metrically compatible with Times New Roman. Used by Timeless skin.
  • ‘Nimbus Roman’ – Generic, has metrics almost identical to Times New Roman and Times Roman. Used by Timeless skin.
  • ‘Noto Serif’ – Webfont, extended language support. Used by Timeless skin.
  • ‘Times’ – Windows, very similar to Times New Roman with subtle differences.
  • serif – ‘Times New Roman’ (on Windows).

Monospace fonts for code blocks (variable @font-family-system-monospace)

[edit]
  • ‘SFMono-Regular’ – Removed, see https://gerrit.wikimedia.org/r/c/wikimedia-ui-base/+/504224
  • ‘Menlo’ – Since OS X.
  • ‘Consolas’ – Windows Vista & newer.
  • ‘Monaco’ – macOS 10.6+. Used by Timeless skin.
  • ‘Noto Mono’ – Webfont, extended language support. Used by Timeless skin.
  • ‘Liberation Mono’ – GNU+Linux, OFL licensed.
  • ‘Nimbus Mono L’ – GNU+Linux, metrics and glyphs very similar to Courier and Courier New. Used by Timeless skin.
  • ‘Courier New’ – Generic.
  • monospace – Platform default.

Fonts used by various projects and in the past

[edit]

Wikimedia Design Style Guide font selection

[edit]

Noto

[edit]

When text is rendered by a computer, sometimes characters are displayed as “tofu”. They are little boxes to indicate your device doesn’t have a font to display the text. Google has been developing a font family called Noto, which aims to support all languages with a harmonious look and feel. Noto is Google’s answer to tofu. The name noto is to convey the idea that Google’s goal is to see “no more tofu”. (source)

Noto is a font family comprising over 100 individual fonts, which are together designed to cover all the scripts encoded in the Unicode standard. As of October 2016, Noto fonts cover all 93 scripts defined in Unicode version 6.0 (released 2010), although fewer than 30,000 of the nearly 75,000 CJK unified ideographs in version 6.0 are covered. In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).

The Noto family is designed with the goal of achieving visual harmony (e.g., compatible heights and stroke thicknesses) across multiple languages/scripts. Commissioned by Google, the font is licensed under the SIL Open Font License. Until September 2015, the fonts were under the Apache License 2.0.

Lato (sans)

[edit]

As of August 2018, Lato is used on more than 9.6 million websites, and is the third most served font on Google Fonts, with over one billion views per day. After Lato was added to Google Fonts it quickly gained popularity, becoming the third most used web font after Google’s own Roboto and Open Sans, with over one billion views per day as of August 2018.

Charis SIL

[edit]

Charis SIL is a transitional serif typeface developed by SIL International based on Bitstream Charter, one of the first fonts designed for laser printers.

Charis SIL is a Unicode-based font family that supports the wide range of languages that use the Latin and Cyrillic scripts. It is specially designed to make long texts pleasant and easy to read, even in less than ideal reproduction and display environments.

Bitstream Charter

[edit]

Bitstream Charter is a serif typeface designed by Matthew Carter in 1987 for Bitstream Inc.[2] Charter is based on Pierre-Simon Fournier’s characters, originating from the 18th century.[3] Classified by Bitstream as a transitional-serif typeface (Bitstream Transitional 801), it also has features of a slab-serif typeface and is often classified as such.

Charter was originally optimized for printing on the low-resolution 300 dpi laser printers of the 1980s, and remains suitable for printing on both modern high-resolution laser printers and inexpensive lower resolution inkjet printers due to its strong, legible design. Its structure was optimised for low-memory computers and printers. In a 2013 interview, Carter explained that it used “a very simplified structure and a minimum number of curves, more straight-line segments… very economical compared to, say, Times New Roman,” but noted that rapid development of printers made this unnecessary even before he had finished the design.[6] In its simplification of serif forms, it foreshadowed Carter’s later landmark design, Georgia for Microsoft.

Charter is based on the characters[10] of Pierre-Simon Fournier, a French 18th century punch-cutter, typefounder and typographic theoretician who invented the “point system”, standardized measurement system for font sizes.

Sans-serif fonts

[edit]

Segoe UI

[edit]

Segoe UI is a member of the Segoe family used in Microsoft products for user interface text, as well as for some online user assistance material, intended to improve the consistency in how users see all text across all languages.

Segoe UI is optimized for Vista’s default ClearType rendering environment, and it is significantly less legible when ClearType is disabled, except at key user interface sizes (8, 9 and 10 point) where Segoe UI has been hinted for bi-level rendering. The standard font size increased to 9 point in Windows Vista to accommodate for better layout and readability for all languages.

The Windows Vista version of Segoe UI (version 5.00) contains complete Unicode 4.1 coverage for Latin, Greek, Cyrillic and Arabic (romans only), totaling 2843 glyphs in the regular weight.

Roboto

[edit]

Roboto is a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android, and released in 2011 for Android 4.0 “Ice Cream Sandwich”.

The entire font family has been licensed under the Apache license. In 2014, Roboto was redesigned for Android 5.0 “Lollipop”.

Roboto is the default font on Android, and since 2013, other Google services such as Google+, Google Play, YouTube, Google Maps, and mobile Google Search.

Verdana

[edit]

Verdana is a humanist sans-serif typeface designed by Matthew Carter for Microsoft Corporation, with hand-hinting done by Thomas Rickner, then at Monotype. Demand for such a typeface was recognized by Virginia Howlett of Microsoft’s typography group and commissioned by Steve Ballmer. The name “Verdana” is based on verdant (something green), and Ana (the name of Howlett’s eldest daughter).

Bearing similarities to humanist sans-serif typefaces such as Frutiger, Verdana was designed to be readable at small sizes on the low-resolution computer screens of the period. Like many designs of this type, Verdana has a large x-height (tall lower-case characters), with wider proportions and loose letter-spacing than on print-orientated designs like Helvetica. The counters and apertures are wide, to keep strokes clearly separate from one another, and similarly-shaped letters are designed to appear clearly different to increase legibility for body text. The bold weight is thicker than would be normal with fonts for print use, suiting the limitations of onscreen display. Carter has described spacing as an area he particularly worked on during the design process.

In the past Verdana (v. 2.43) had an incorrect position for combining diacritical marks, causing them to display on the following character instead of the preceding. This made it unsuitable for Unicode-encoded text such as Cyrillic or Greek. This bug did not usually reveal itself with Latin letters. This is because some font display engines substitute sequences of base character + combining character with a precomposed character glyph. This bug was subsequently fixed in the version issued with Windows Vista. It is also fixed in Verdana version 5.01 font on Windows XP by installing the European Union Expansion Font Update from Microsoft.

Helvetica

[edit]

Helvetica or Neue Haas Grotesk is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger with input from Eduard Hoffmann.

Helvetica is a neo-grotesque or realist design, one influenced by the famous 19th century typeface Akzidenz-Grotesk and other German and Swiss designs. Its use became a hallmark of the International Typographic Style that emerged from the work of Swiss designers in the 1950s and 60s, becoming one of the most popular typefaces of the 20th century. Over the years, a wide range of variants have been released in different weights, widths, and sizes, as well as matching designs for a range of non-Latin alphabets. Notable features of Helvetica as originally designed include a high x-height, the termination of strokes on horizontal or vertical lines and an unusually tight spacing between letters, which combine to give it a dense, solid appearance.

Helvetica Neue is a reworking of the typeface with a more structurally unified set of heights and widths. Other changes include improved legibility, heavier punctuation marks, and increased spacing in the numbers.

Serif fonts

[edit]

Georgia

[edit]

Georgia is a serif typeface designed in 1993 by Matthew Carter and hinted by Tom Rickner for the Microsoft Corporation. It was intended as a serif typeface that would appear elegant but legible printed small or on low-resolution screens.

As a transitional serif design, Georgia shows a number of traditional features of ‘rational’ serif typefaces from around the early 19th century, such as alternating thick and thin strokes, ball terminals and a vertical axis. Speaking in 2013 about the development of Georgia and Miller, Carter said, “I was familiar with Scotch romans, puzzled by the fact that they were once so popular…and then they disappeared completely.” Its figure (numeral) designs are lower-case or text figures, designed to blend into continuous text; this was at the time a rare feature in computer fonts.

Closer inspection, however, shows how Georgia was designed for clarity on a computer monitor even at small sizes. It features a large x-height (tall lower-case letters) and its thin strokes are thicker than would be common on a typeface designed for display use or the greater sharpness possible in print. Its reduced contrast and thickened serifs make it somewhat resemble Clarendon designs from the 19th century.

The Georgia typeface is similar to Times New Roman, another re-imagination of transitional serif designs, but as a design for screen display it has a larger x-height and fewer fine details. The The New York Times changed its standard font from Times New Roman to Georgia in 2007.

Georgia is a “Scotch Roman”—a style which originated in types sold by Scottish type foundries of Alexander Wilson and William Miller in the period of 1810–1820.

Example of non-lining numbers in Georgia font, if Georgia is rendered: 123456789

[edit]

Note: Numbers in Georgia font are non-lining, the font-feature supposed to change this is documented at Talk:Typography refresh/Archive 2#Numbers looks weird in article title Given current underwhelming browser support and font-feature-settings: 'lnum' on; not changing the numeral lining in latest Chrome/Firefox macOS due to lack of font feature in macOS Georgia, this hasn't been applied in code.

Times, Arial and substitutes

[edit]

Linux Libertine

[edit]

Linux Libertine is a proportional serif typeface inspired by 19th century book type and is intended as a replacement for the Times font family.

Liberation

[edit]

These fonts are metrically compatible with the most popular fonts on the Microsoft Windows operating system and the Microsoft Office software package (Monotype Corporation’s Arial, Arial Narrow, Times New Roman and Courier New, respectively), for which Liberation is intended as a free substitute.

Croscore

[edit]

The Chrome OS core fonts, also known as the Croscore fonts, are a collection of three TrueType font families: Arimo (sans-serif), Tinos (serif) and Cousine (monospace). These fonts are metrically compatible with Monotype Corporation’s Arial, Times New Roman, and Courier New, the most commonly used fonts on Microsoft Windows, for which they are intended as open-source substitutes.

In 2013, Google released an additional Crosextra (Chrome OS Extra) package, featuring Carlito (which matches Microsoft’s Calibri) and Caladea (matching Cambria). These two fonts are respectively metric-adjusted versions of Lato and Cambo, both available on Google Fonts.

Nimbus Roman No. 9 L

[edit]

Although the characters are not exactly the same, Nimbus Roman No. 9 L has metrics almost identical to Times New Roman and Times Roman. It is one of the Ghostscript fonts, a free alternative to 35 basic PostScript fonts (which include Times).

Times

[edit]

Although Times New Roman and Times are very similar, various differences developed between the versions marketed by Linotype and Monotype when the master fonts were transferred from metal to photo and digital media. For example, Linotype has slanted serifs on the capital S, while Monotype’s are vertical, and Linotype has an extra serif on the number 5. Most of these differences are invisible in body text at normal reading distances, or 10pts at 300 dpi.

Monospace fonts

[edit]

Consolas

[edit]

Consolas is a monospaced typeface, designed by Luc(as) de Groot. It is a part of the ClearType Font Collection, a suite of fonts that take advantage of Microsoft’s ClearType font rendering technology. It has been included with Windows since Windows Vista, Microsoft Office 2007 and Microsoft Visual Studio 2010, and is available for download from Microsoft. It is the only standard Windows Vista font with a slash through the zero character.

Although Consolas is designed as a replacement for Courier New, only 713 glyphs were initially available, as compared to Courier New (2.90)’s 1318 glyphs. In version 5.22 (included with Windows 7), support for Greek Extended, Combining Diacritical Marks For Symbols, Number Forms, Arrows, Box Drawing, Geometric Shapes was added. In version 5.32 the total number of supported glyphs was 2735.

Monaco

[edit]

Monaco is a monospaced sans-serif typeface designed by Susan Kare and Kris Holmes. It ships with OS X and was already present with all previous versions of the Mac operating system. Characters are distinct, and it is difficult to confuse 0 (figure zero) and O (uppercase O), or 1 (figure one), (Vertical bar), I (uppercase i) and l (lowercase L). A unique feature of the font is the high curvature of its parentheses as well as the width of its square brackets, the result of these being that an empty pair of parentheses or square brackets will strongly resemble a circle or square, respectively.

Menlo

[edit]

Menlo is a monospaced sans-serif typeface designed by Jim Lyles. The face first shipped with Mac OS X Snow Leopard. Menlo is based upon the Open Source font Bitstream Vera and the public domain font Deja Vu.

Nimbus Mono L

[edit]

Although not exactly the same, Nimbus Mono has metrics and glyphs that are very similar to Courier and Courier New.

Retrieved from "https://www.mediawiki.org/w/index.php?title=Design/Archive/Wikimedia_User_Interface/Use_cases/Font_family_stack&oldid=6157902"