Using System Fonts in the Browser

When defining a font family and style for our websites, we typically use the six font properties. This keeps things consistent between users of the website across various computer systems.

p {
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.6;
  font-family: Arial;
  
  /* shorthand */
  font: normal normal 500 13px/1.6 Arial;
}

In addition to acting as a shorthand for these six properties, the font property can also accept five keyword values. These values will set all six font properties of the element based on the various system fonts of the current user.

These values are -

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

The Font Families #

Each system typically has one default font family that is used. Depending on which of the keyword values are used (i.e. caption, icon etc), the font family typically stays the same, but the other font properties may differ.

These are the default font families used across various systems.

System	Font Family
Mac (Yosemite)	Helvetica
Mac (El Capitan)	San Francisco
Windows (XP and below)	Arial
Windows (Vista and above)	Segoe UI
Ubuntu	Ubuntu

The font Keyword Values #

font: caption | icon | menu | message-box | small-caption | status-bar

caption #

This refers to the font used by the user's system for "captioned controls". For example, the font used for buttons.

These are the font styles used for caption in Windows and Mac -

Font Properties	Mac	Windows
font-size	13px	16px
font-style	normal	normal
font-variant	normal	normal
font-weight	regular	regular

icon #

This refers to the font used to label icons.

Font Properties	Mac	Windows
font-size	13px	16px
font-style	normal	normal
font-variant	normal	normal
font-weight	regular	regular

menu #

This refers to the font used in menus. For example, the font used in dropdown menus.

Font Properties	Mac	Windows
font-size	13px	12px
font-style	normal	normal
font-variant	normal	normal
font-weight	regular	regular

message-box #

This refers to the font used in dialog boxes.

Font Properties	Mac	Windows
All properties	No style	No style

small-caption #

This refers to the font used for labelling small controls.

Font Properties	Mac	Windows
font-size	11px	12px
font-style	normal	normal
font-variant	normal	normal
font-weight	regular	regular

status-bar #

This refers to the font used in window status bars.

Font Properties	Mac	Windows
font-size	10px	12px
font-style	normal	normal
font-variant	normal	normal
font-weight	regular	regular

Using System Fonts in the Browser #

Provide Simple Fallbacks #

These keywords can be extremely useful for providing a fallback for the font properties. Because they set all six of the properties in one word, we can use them as the default and selectively change particular properties if needed.

For example writing this -

p {
  font: caption;
  font-size: 18px;
}

Is essentially equivalent to writing this -

p {
  font-family: Helvetica; /* If the user is on a Mac */
  font-style: normal;
  font-weight: regular;
  font-variant: normal;
  font-size: 13px; /* If the user is on a Mac */


  font-size: 18px;
}

It is probably less useful for setting font families due to the ability to set reliable fallbacks with the font-family property. However, it can provide a useful default for the other font properties.

Create a Native Look #

Another use for these keywords to create the look of a native application. By using the same font the machine uses in the same scenarios, e.g. buttons, dropdown menus, you can make your website or application look native to the user’s system.