Wikipedia:Typography
{{redirect|WP:TYPE|the Typography wikiproject|Wikipedia:WikiProject Typography}}
{{for|typography in the Wikipedia logo|Linux Libertine}}
{{essay in development|WP:TYPE}}
Typography, i.e. the use of fonts, on Wikipedia can often be a source of heated debates. This is because Wikipedia has never set an explicit font in its default skin. This was true for Monobook, and still holds for Vector. The base font for these skins are simply defined as font-family: sans-serif. Likewise, the size of fonts are also subject to debates. Vector uses the definition of font-size: 0.875em;, which translates to 87.5% of the default fontsize set in a user's browser. Under Windows, the default fonts in browsers are normally defined as Arial at 16px for sans-serif, Times New Roman at 16px for serif and Courier New at 13px for monospace. 0.875 × 16 equals 14px exactly. However, all fonts shown here are 16px, the browser's default.
Below are some personal writings on web typography, and its potential use on Wikipedia. It focuses on fonts that are installed by default, as these provide a stable installed base. It also focuses heavily on Windows. Information relating to other platforms is very welcome.
How to use other fonts in an article
Here are the tags to use if you wish to change the font in the text of an article.
Please note, fonts that have the same cap height, do not always match in x-height, making them hard to mix inline without scaling. Based on Arial as the base font, Comic Sans MS, Georgia, Trebuchet MS and Verdana are safe to use inline. Times New Roman is not safe to use inline without scaling. Although Courier New has a lower height, it remains legible, and is the de facto monospace font. (Arial Black and Impact are not listed, as these are header fonts.)
- Here are examples of code to use, for various fonts.
- Safe to use inline (see above for details):
Arial; the base font, Comic Sans MS, Georgia, Trebuchet MS Verdana - Not safe to use inline (see above for details):
Times New Roman Courier New
- below is how the font codes above would look when actually used.
- Safe to use inline (see above for details):
- Arial, the base font
- Comic Sans MS
- Georgia
- Trebuchet MS
- Verdana
- Not safe to use inline (see above for details):
- Times New Roman
- Courier New
Legacy font names
On Macs, Helvetica, Times, and Courier are three core fonts used by Adobe's PostScript and PDF technologies. All three fonts have been included on every Mac going back to the 1980s, and they are the default "sans-serif", "serif", and "monospace" fonts in almost all web browsers.
On early versions of Windows, these names referred to pixelated versions of the core PostScript fonts. As technology improved, rather than adopting the Mac fonts, Microsoft substituted Helvetica with Arial, Times with Times New Roman, and Courier with Courier New. All six of the aforementioned fonts have been included on Macs since the 2000s.
| class="wikitable"
! Font ! Sample ! Variants ! Windows substitute |
| style="font-family: Helvetica, sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |Arial |
| style="font-family: Times, serif; font-size: 16px;"
| Times | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |Times New Roman |
| style="font-family: Courier, monospace; font-size: 16px;"
| Courier | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |Courier New |
Available fonts
=Core fonts for the Web=
| class="wikitable"
! Font ! Sample ! Variants |
| style="font-family: Arial, sans-serif; font-size: 16px;"
| Arial | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Times New Roman', serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Courier New', monospace; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Comic Sans MS', cursive; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Georgia, serif; font-size: 16px;"
| Georgia | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Trebuchet MS', sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Verdana, sans-serif; font-size: 16px;"
| Verdana | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
==Availability==
The Core fonts for the Web have an installed base of 99% on Windows (except Andalé Mono) and 92–98% on Mac OS X platforms, as they are now part of the standard installation. Despite the necessity to install these fonts separately, they still enjoy an installed base of 65% among Linux installations.
Originally part of the Core Web fonts, Andalé Mono is not installed with Windows (having been replaced by Lucida Console), resulting in only 4% of Windows installations having the font, as opposed to 92% on Mac OS X. It used to be shipped with Internet Explorer until version 6, and was only installed with Windows 98. As the fonts are still available online, it does have an installed base of 70% on Linux. As it is similar and metric-compatible to Lucida Console, it is recommended to always combine Lucida Console and Andalé Mono in a font stack.
iOS has all the fonts listed in the table above, except Andalé Mono and Comic Sans MS. However, it does have a Comic Sans–like font called Chalkboard SE. Consider using this CSS font stack: font-family: "Comic Sans MS", Chalkboard SE, cursive, sans-serif;
==Size==
:Note: This section holds true for 13px, but since the Typography Refresh, most fonts no longer match in 14px.
Fonts that have the same cap height do not always match in x-height, making them hard to mix inline without scaling. Based on Arial as the base font, Comic Sans MS, Georgia, Trebuchet MS and Verdana are safe to use inline. Times New Roman is not safe to use inline without scaling. Although Courier New has a lower height, it remains legible, and is the de facto monospace font. (Arial Black and Impact are not listed, as these are header fonts.)
== Header fonts ==
Arial Black and Impact are part of the set of core fonts for the web, but they are very heavy designs that are only recommended for use at large sizes. In addition, Arial Black is not installed on iOS devices. Furthermore, Impact is not installed on ChromeOS devices or older iOS devices.
| class="wikitable"
! Font ! Sample ! Variants |
| style="font-family: Arial Black, sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Black |
| style="font-family: Impact, sans-serif; font-size: 16px;"
| Impact | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular |
=Common Windows fonts=
| class="wikitable"
! Font ! Since ! Sample ! Variants |
| style="font-family: Tahoma, sans-serif; font-size: 16px;"
| Tahoma | Windows 98 | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold |
| style="font-family: 'Lucida Sans Unicode', sans-serif; font-size: 16px;"
| Windows 98 | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular |
| style="font-family: 'Lucida Console', monospace; font-size: 16px;"
| Windows 98 | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular |
| style="font-family: 'Microsoft Sans Serif', sans-serif; font-size: 16px;"
| Windows 2000 | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular |
| style="font-family: 'Palatino Linotype', serif; font-size: 16px;"
| Windows 2000 | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Franklin Gothic Medium', sans-serif; font-size: 16px;"
| Windows XP | The Quick Brown Fox Jumps Over The Lazy Dog. | Medium, Medium Italic |
| style="font-family: 'Segoe UI', sans-serif; font-size: 16px;"
| Segoe UI | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Calibri, sans-serif; font-size: 16px;"
| Calibri | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Cambria, serif; font-size: 16px;"
| Cambria | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Candara, sans-serif; font-size: 16px;"
| Candara | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Consolas, monospace; font-size: 16px;"
| Consolas | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Constantia, serif; font-size: 16px;"
| Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: Corbel, sans-serif; font-size: 16px;"
| Corbel | Windows Vista | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
All but Palatino Linotype and Segoe UI have one major drawback: they all come without bold and/or italic variants. The "new" Windows ClearType font family introduced in Windows Vista has consistent font metrics, but these do not match with the core web fonts listed above, so they need to be scaled when mixed.
On Mac, Tahoma and Microsoft Sans Serif have been part of the standard installation of macOS since 2007 (Mac OS X Leopard). Macs do not have Palatino Linotype, but they do have the PostScript version of Palatino, which looks the same but has slightly different metrics (i.e. height and width of characters). You can ensure Mac and Windows users get a similar experience by using this CSS font stack: font-family: Palatino, "Palatino Linotype", serif;
The other fonts in this list (e.g. Cambria, Calibri), come with Microsoft Word for Mac, but are not installed system-wide on newer (post-2011) versions. Regardless, since not all Macs have Word, you can't count on those fonts being installed. Segoe UI is not available on Mac through legitimate means. None of these fonts are available on iOS.
=Common Linux fonts=
| class="wikitable"
! Font ! Sample ! Variants |
| style="font-family: 'Nimbus Sans L', NimbusSanL, sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Nimbus Roman No9 L', NimbusRomNo9L, serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Nimbus Mono L', NimbusMonL, monospace; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Century Schoolbook L', CenturySchl, serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'URW Gothic L', URWGothicL, sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'URW Bookman L', URWBookmanL, serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'URW Palladio L', URWPalladioL, serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'DejaVu Sans', sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'DejaVu Serif', serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'DejaVu Sans Mono', monospace; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Liberation Sans', sans-serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Liberation Serif', serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: 'Liberation Mono', monospace; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: FreeSans, sans-serif; font-size: 16px;"
| FreeSans | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: FreeSerif, serif; font-size: 16px;"
| The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
| style="font-family: FreeMono, monospace; font-size: 16px;"
| FreeMono | The Quick Brown Fox Jumps Over The Lazy Dog. | Regular, Bold, Italic, Bold Italic |
Monospaced fonts
When displaying code, a monospaced font helps keep code readable and maintain formatting consistent, but there are caveats. Below are some common monospaced fonts.
| class="wikitable"
!Font !Sample !Supported platforms |
| style="font-family: 'Courier', monospace; font-size: 16px;"
| Courier | The Quick Brown Fox Jumps Over The Lazy Dog. |Mac (replaced by Courier New on Windows) |
| style="font-family: 'Courier New', monospace; font-size: 16px;"
| Courier New | The Quick Brown Fox Jumps Over The Lazy Dog. |Windows, Mac |
| style="font-family: Consolas, monospace; font-size: 16px;"
| Consolas | The Quick Brown Fox Jumps Over The Lazy Dog. |Windows |
| style="font-family: 'Lucida Console', monospace; font-size: 16px;"
| Lucida Console | The Quick Brown Fox Jumps Over The Lazy Dog. |Windows |
| style="font-family: 'Andale Mono', monospace; font-size: 16px;"
| Andale Mono | The Quick Brown Fox Jumps Over The Lazy Dog. |Mac |
| style="font-family: 'Menlo', monospace; font-size: 16px;"
| Menlo | The Quick Brown Fox Jumps Over The Lazy Dog. |Mac |
Not all monospaced fonts come with a bold weight variant, causing bold text to misalign with the rest of the text. Andalé Mono and Lucida Console suffer badly from this. That leaves Courier, Courier New, Menlo and Consolas as the only safe choices when bold and italic highlighting is used. Courier New is the safest choice as it is the only monospaced font that is guaranteed to look the same on both Windows and Mac. However, Courier and Courier New are serif fonts, and sans-serif monospaced fonts are typically used for coding. That leaves Menlo and Consolas as the only sans-serif coding fonts. However, since Menlo and Consolas aren't included in both Windows and macOS at the same time, consider using Menlo and Consolas in a font stack.
Starting in 2020, Firefox for Mac has started using Menlo (instead of Courier) as the default "monospace" font.
=The monospace "bug"=
{{shortcut|WP:MONO}}
When viewing monospaced text here on Wikipedia, sometimes it is shown too small. This is not a bug, but a result of the combination of a website's default font size and the browser's default font size for monospace. By default, a (Windows) browser has its default font sizes set at 16px for serif and sans-serif, and 13px for monospace.
Vector has a base font size of 0.875em, and most browsers—except Firefox—correctly scale down all fonts, including the monospaced font, accordingly. So monospace is shown at 0.875 × 13px = 11px (which is perceived as "too small"). Compensating the font-size will render the font too big in Firefox. The solution is to assign any font besides just "monospace", for example font-family: monospace, monospace; or font-family: monospace, Courier;. The browsers will ignore the second value. But it will no longer use the configured "monospace" font size and instead use the same size as sans-serif.
Emoji fonts
{{also|Implementation of emojis}}
When describing emojis, it helps to use a font that actually includes the glyph for that emoji. Most recent operating system versions include an emoji font, below are some common ones.
| class="wikitable"
!Font !Sample !Supported platforms |
| Segoe UI Emoji
| style="font-family: 'Segoe UI Emoji'; font-size: 16px;" | 🩷💀🫱🏿🫲🏻🌴🐢🐐🍄⚽🫧👑📸🪼👀🚨🏡🕊️🏆😻🌟🧿🍀🫶🏾 |
| Apple Color Emoji
| style="font-family: 'Apple Color Emoji'; font-size: 16px;" | 🩷💀🫱🏿🫲🏻🌴🐢🐐🍄⚽🫧👑📸🪼👀🚨🏡🕊️🏆😻🌟🧿🍀🫶🏾 |iOS, macOS, tvOS, watchOS{{cite web |date=6 September 2023 |title=System Fonts - Fonts - Apple Developer |url=https://developer.apple.com/fonts/system-fonts/ |access-date=6 September 2023}} |
| Noto Color Emoji
| style="font-family: 'Noto Color Emoji'; font-size: 16px;" | 🩷💀🫱🏿🫲🏻🌴🐢🐐🍄⚽🫧👑📸🪼👀🚨🏡🕊️🏆😻🌟🧿🍀🫶🏾 |Android, ChromeOS, Linux{{efn|name=linux-emoji|Noto Color Emoji is preinstalled on some Linux distributions like Ubuntu, Debian, Fedora, and postmarketOS, but not on others like Arch.}} |
{{Notelist}}
Mozilla Firefox and Thunderbird also package Twemoji Mozilla, derived from Twemoji, and use it as a fallback if a system-wide emoji font isn't available.{{cite web |url=https://github.com/mozilla/twemoji-colr |title=twemoji-colr: Twemoji font in COLR/CPAL layered format |author=Mozilla |author-link=Mozilla |website=GitHub|date=October 28, 2022 }}{{cite web |url=https://bugzilla.mozilla.org/show_bug.cgi?id=1686274 |title=Determine if we still need to load TwemojiMozilla.ttf |date=January 12, 2021 }}
- Here are example emojis without specifying an emoji font:
- 😀♥✏⚠⤴⤵
- Here are example emojis with an emoji font stack:
- 😀♥✏⚠⤴⤵
See also
References
{{Reflist|refs=
}}
External links
- [http://www.webspaceworks.com/resources/fonts-web-typography/43/ Aspect values, x-widths for fonts] – for use with
font-size-adjust, a CSS3 property for scaling fonts. - [http://www.brunildo.org/test/aspect-lh-table2.html Compute the ‘normal line-height’ and the ‘aspect value’ of the installed fonts]
Category:Wikipedia article elements help