Using System Fonts in the Browser

This content originally appeared on bitsofcode and was authored by Ire Aderinokun

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.

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 -

icon #

This refers to the font used to label icons.

menu #

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

message-box #

This refers to the font used in dialog boxes.

small-caption #

This refers to the font used for labelling small controls.

status-bar #

This refers to the font used in window status bars.

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.

This content originally appeared on bitsofcode and was authored by Ire Aderinokun

Print Share Comment Cite Upload Translate Updates

APA

Ire Aderinokun | Sciencx (2015-11-10T00:00:00+00:00) Using System Fonts in the Browser. Retrieved from https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/

MLA

" » Using System Fonts in the Browser." Ire Aderinokun | Sciencx - Tuesday November 10, 2015, https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/

HARVARD

Ire Aderinokun | Sciencx Tuesday November 10, 2015 » Using System Fonts in the Browser., viewed ,<https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/>

VANCOUVER

Ire Aderinokun | Sciencx - » Using System Fonts in the Browser. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/

CHICAGO

" » Using System Fonts in the Browser." Ire Aderinokun | Sciencx - Accessed . https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/

IEEE

" » Using System Fonts in the Browser." Ire Aderinokun | Sciencx [Online]. Available: https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/. [Accessed: ]

rf:citation

» Using System Fonts in the Browser | Ire Aderinokun | Sciencx | https://www.scien.cx/2015/11/10/using-system-fonts-in-the-browser/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.