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.

Button

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 for Labelling Icons

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

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

Dropdown Menu

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 for Small Caption

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 for 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.