Charles A Upsdell: Website DesignBrowser NewsCharles A Upsdell: Website Design

Page loading …ResourcesFonts ⮞ Font Metrics

Synopsis : this page has a list of fonts and a table which reports their font metrics.

Note : font metrics for embedded fonts may be invalid — and will appear as blanks — if the fonts take too long to load, or if they fail to load. Font metrics may also be invalid for the Alegreya SC and Crimson Text fonts, probably due to defects in the font files.

Note : the correct fonts will not appear when the operating system performs font substitution; for example, Helvetica and Times will not appear in Windows because Windows substitutes Arial for Helvetica and Times New Roman for Times.

Note : characters in tiny sizes will not appear in the proper sizes if the browser has been configured to set a minimum font size.

Note : the font metrics table below may appear very slowly, because much JavaScript must be executed, and many embedded fonts must be downloaded; Chrome-based browsers were particularily slow when this was written, in July 2017.

Subsections include:

Note : unlike most Browser News pages, this page is starkly plain, with minimal styling (except in the font metrics table), partly to illustrate the points more clearly, but mainly to make it easier to compare browsers: viewing this page with several browsers and/or configurations at the same time makes the browsers’ basic differences clearer.

See also : other major pages in this site are Home, News, Find Browsers, Resources, Stats, and Store.

See also : other pages in this site which are closely related include Resources ⮞ Font Choices, Resources ⮞ Fonts ⮞ Fluid Design & Sizes, Resources ⮞ Fonts, Resources ⮞ Font Choices, Resources ⮞ Fonts ⮞ Samples (slow page), Resources ⮞ Fonts ⮞ Sets (slow page), Resources ⮞ Fonts ⮞ Possible Weights (slow page), and Resources ⮞ Fonts ⮞ True Weights (very, very slow page).

See also : another source for certain font metrics is Jukka Korpela’s site.

Summary 

Small text is larger in Microsoft Edge and Internet Explorer than in other modern browsers. For example, when medium sized text is 16 pixels, small text is 13.33 pixels in Microsoft’s browsers, but 13 pixels in Chrome, Firefox, Opera, SeaMonkey, and Vivaldi.

Fonts with similar metrics are good matches size-wise, but may be poor matches for other reasons. For example, Arial and Palatino Linotype have similar metrics, but are distinct in appearance, so would make a good body text / header text pair. Or, for example, Arial and Liberation Sans have similar metrics, but are also similar in appearance, so would make a poor body text / header text pair, but would be good alternatives in a font-family list.

Fonts with small metrics, with small ex values, or that are very narrow or wide, make less readable body text.

Fonts Listed 

Metrics are displayed for these generic, proposed generic, installed, and embedded fonts:

Font Metrics Table 

The table below reports CapHgt, the height of capital letters, not counting descenders (in pixels), Width, an average character width (in pixels), Ex Size, the character ex size (in pixels), Ex/Em, the ex/em ratio, and Ex/CapHgt, the Ex/CapHgt ratio, 𝓛 (a legibility factor, with higher values indicating greater legibility), for both medium and small font sizes. If the font-stretch property is not normal, the ratio of the font width to the parent font’s width (in %) appears below the character width. Beneath the font name in the first column appears the CSS needed to select that font, including property values for Coping with Direct­Write Issues. This information is reported for a variety of fonts installed on this author’s primary PC, installed on MacOS, and embedded from Google Fonts: this includes fonts not installed on your PC, some of which you can find on Resources ⮞ Fonts ⮞ Free Fonts. Note : clicking on the font name will take you to a page with details about that font, including metrics and samples for all its font weights. Note : the metrics may vary with the browser or the platform. Note : if you change your browser’s default font size, you must refresh this page in order to update the table.

If the font is unavailable, this is normally reported: but you can hide fonts which are not available, and later unhide the fonts. Note that updating the table is slow because much JavaScript must be executed.

Note : if CapHgt is blank — which can happen with embedded fonts when the fonts aren’t loaded quickly enough — the metrics are invalid: refresh the page to correct the metrics.

Note : values related to ex units are omitted if the values appear to be faulty; this often happens with embedded fonts.

Note : the embedded fonts are .

Raw Metrics Data

The following raw metrics data are used to calculate the above font metrics; you should ignore it.