CSS Fonts

CSS Fonts

Styling Text with Fonts

CSS font properties allow you to control the appearance of text, including its typeface (font family), size, weight (boldness), style (italic), and other variations.

Serif vs. Sans-serif Fonts

Fonts are often categorized into broad families based on their appearance. Two common categories are:

• Serif: Fonts with small decorative strokes (serifs) attached to the ends of the main strokes of letters. Examples include Times New Roman, Georgia, Garamond. Serif fonts are often used for long-form body text in print, as the serifs can aid readability.
• Sans-serif: Fonts without serifs (‘sans’ means ‘without’). Examples include Arial, Verdana, Helvetica, Open Sans. Sans-serif fonts are widely considered easier to read on digital screens, especially at smaller sizes, and are very common for web body text and UI elements.

Other generic families include monospace (where all characters have the same width, like Courier New or Consolas, often used for code), cursive (imitating handwriting, like Brush Script MT), and fantasy (decorative or playful fonts).

Font Family (font-family)

The font-family property specifies a prioritized list of font family names and/or generic family names for an element.

You should provide multiple options (a “font stack”) as a fallback mechanism. The browser starts with the first font in the list. If it’s not available on the user’s system (or not loaded via @font-face), it tries the next font, and so on. Always end the list with a generic family name (like sans-serif or serif) to ensure the browser can pick a suitable substitute if none of the specific fonts are found.

Font names containing spaces must be enclosed in quotation marks.

p {
  /* Try 'Open Sans', then 'Helvetica Neue', then any available sans-serif font */
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

code {
  /* Use common monospace fonts */
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

Web Fonts (@font-face)

Relying only on fonts installed on a user’s system limits design choices. @font-face allows you to load custom font files (like .woff, .woff2) along with your website, ensuring consistent typography for all users.

You define the font using @font-face and then reference the defined font-family name in your CSS rules.

/* Define a custom font */
@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2'),
       url('/fonts/mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Use the custom font */
h1 {
  font-family: 'MyCustomFont', sans-serif; /* Fallback still recommended */
}

Services like Google Fonts provide a vast library of web fonts that are easy to integrate.

Font Size (font-size)

The font-size property sets the size of the text. Choosing appropriate units is important for accessibility and responsiveness.

• px (pixels): Absolute unit. Defines a fixed size. Not ideal for accessibility as it doesn’t scale with user’s browser font size preferences.
• em: Relative unit. Relative to the font size of the parent element. 1em equals the parent’s font size. Can lead to compounding effects if nested deeply.
• rem (root em): Relative unit. Relative to the font size of the root element (<html>). 1rem equals the root element’s font size (typically 16px by default in browsers). Generally preferred for scalable and predictable typography, as it avoids compounding issues and respects user preferences.
• % (percentage): Similar to em, relative to the parent element’s font size.
• Viewport units (vw, vh): Relative to the viewport’s width or height. Can be used for fluid typography that scales with the screen size.

Modern best practice often involves setting a base font size on the <html> element (e.g., html { font-size: 100%; } or html { font-size: 16px; }) and then using rem units for sizing text elements, padding, margins, etc., throughout the site. This allows the entire layout to scale proportionally if the user changes their base font size preference.

html {
  font-size: 100%; /* Usually defaults to 16px */
}

body {
  font-size: 1rem; /* Equivalent to the root font size (16px) */
  line-height: 1.5; /* Line height relative to font size */
}

h1 {
  font-size: 2.5rem; /* 2.5 * 16px = 40px */
}

p {
  font-size: 1rem; /* 1 * 16px = 16px */
}

.small-text {
  font-size: 0.875rem; /* 0.875 * 16px = 14px */
}

Font Weight (font-weight)

The font-weight property specifies the boldness of the text.

It accepts keywords (normal, bold) or numeric values from 100 to 900 (in increments of 100). normal usually corresponds to 400, and bold to 700.

.normal-text {
  font-weight: normal; /* or 400 */
}

.bold-text {
  font-weight: bold; /* or 700 */
}

.light-text {
  font-weight: 300; /* Requires font support for this weight */
}

.extra-bold-text {
  font-weight: 800; /* Requires font support */
}

Note: Not all fonts support all weights. If a specific numeric weight is not available, the browser will typically choose the nearest available weight.

Font Style (font-style)

The font-style property primarily specifies whether text should be italicized.

• normal: Displays text normally.
• italic: Displays text using the italic version of the font, if available.
• oblique: Displays text using a slanted version of the normal font. If the font has a true italic face, italic is usually preferred. If no italic or oblique face is available, the browser may simulate slanting.

.emphasis {
  font-style: italic;
}

.simulated-slant {
  /* Use oblique if true italic is not desired or available */
  font-style: oblique;
}

Font Variant (font-variant)

The font-variant property allows you to enable typographic variations like small caps.

The most common use is font-variant: small-caps;, which displays lowercase letters as smaller versions of uppercase letters. This requires the font to support the small-caps feature for true rendering; otherwise, browsers might simulate it.

.title-caps {
  font-variant: small-caps;
}

More specific control is available via properties like font-variant-caps, font-variant-numeric, etc.

Variable Fonts

Variable fonts are a modern font format that packs multiple style variations (like weight, width, slant) into a single file. Instead of loading separate files for regular, bold, light, condensed, etc., you load one variable font file and can access intermediate styles via CSS.

You control variations using low-level properties like font-variation-settings or, increasingly, standard properties like font-weight and font-style which can accept a wider range of values with variable fonts.

/* Example using font-weight with a variable font that supports it */
.variable-weight {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 650; /* Access an intermediate weight */
}

The font Shorthand Property

The font property is a shorthand for setting multiple font properties in one declaration. It requires at least font-size and font-family.

The general syntax order is: font: [font-style || font-variant || font-weight] font-size[/line-height] font-family

Example:

body {
  /* Set style, weight, size, line-height, and family */
  font: italic bold 1rem/1.6 sans-serif;
}

p {
  /* Only mandatory size and family */
  font: 16px Arial, sans-serif;
}

Note: Using the font shorthand resets any omitted optional font properties (like font-style, font-weight, font-variant, line-height) to their initial values.

All CSS Font Properties Summary

Property / Rule	Description
font	Shorthand for setting multiple font properties.
font-family	Specifies the font family (typeface).
font-size	Specifies the size of the font.
font-stretch	Selects a normal, condensed, or expanded face from a font family.
font-style	Specifies the font style (normal, italic, oblique).
font-variant	Specifies typographic variations (e.g., small-caps).
font-weight	Specifies the weight (boldness) of the font.
line-height	Specifies the height of a line box (often set alongside font properties).
@font-face	Rule to define and load custom web fonts.