CSS Fonts & Typography

Learn how to use CSS font properties to create beautiful and readable typography on the web

What are CSS Font Properties?

CSS provides extensive control over font styling, allowing you to define font families, sizes, weights, and other typographic features. Proper font usage is crucial for readability, accessibility, and creating visually appealing designs.

Key Font Properties:

font-family - Specifies the typeface
font-size - Controls the size of text
font-weight - Sets the thickness of characters
font-style - Defines italic or oblique text
font-variant - Controls small-caps and other variants
line-height - Sets the space between lines of text
font - Shorthand for multiple font properties

Serif Font

Sans-Serif Bold

Monospace Font

Italic Font Style

CSS Font Properties Reference

Property	Description	Values
font-family	Specifies the font for an element	family-name, generic-name, inherit
font-size	Sets the size of the font	px, em, rem, %, small, large, etc.
font-weight	Sets the thickness of the font	normal, bold, bolder, lighter, 100-900
font-style	Sets the style of the font	normal, italic, oblique
font-variant	Displays text in a small-caps font	normal, small-caps, inherit
line-height	Sets the space between lines	normal, number, length, percentage
font	Shorthand for font properties	style variant weight size/line-height family
@font-face	Defines custom fonts	font-family, src, weight, style
font-display	Controls how fonts are displayed while loading	auto, block, swap, fallback, optional

CSS Font Properties in Action

Example Code

/* CSS Font Properties */

/* Font family */
.font-family {
  font-family: Arial, sans-serif; /* Font stack with fallbacks */
  font-family: "Times New Roman", Times, serif;
  font-family: "Courier New", Courier, monospace;
  font-family: Georgia, serif;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Font size */
.font-size {
  font-size: 16px;           /* Absolute size in pixels */
  font-size: 1rem;           /* Relative to root element */
  font-size: 1em;            /* Relative to parent element */
  font-size: 100%;           /* Percentage of parent's font size */
  font-size: smaller;        /* Relative keywords */
  font-size: larger;
  font-size: xx-small;       /* Absolute keywords */
  font-size: medium;
  font-size: xx-large;
}

/* Font weight */
.font-weight {
  font-weight: normal;       /* Normal weight */
  font-weight: bold;         /* Bold weight */
  font-weight: lighter;      /* Lighter than parent */
  font-weight: bolder;       /* Bolder than parent */
  font-weight: 400;          /* Numeric values from 100 to 900 */
  font-weight: 700;
}

/* Font style */
.font-style {
  font-style: normal;        /* Normal style */
  font-style: italic;        /* Italic style */
  font-style: oblique;       /* Oblique style (similar to italic) */
  font-style: oblique 10deg; /* Oblique with angle */
}

/* Font variant */
.font-variant {
  font-variant: normal;      /* Normal variant */
  font-variant: small-caps;  /* Small capitals */
}

/* Line height */
.line-height {
  line-height: normal;       /* Browser's default */
  line-height: 1.5;          /* Unitless multiplier */
  line-height: 1.5em;        /* With units */
  line-height: 150%;         /* Percentage */
}

/* Font shorthand */
.font-shorthand {
  font: normal normal normal 16px/1.5 Arial, sans-serif;
  /* style variant weight size/line-height family */
  
  font: italic small-caps bold 1.2em/1.5 "Helvetica Neue", sans-serif;
  font: 700 1.5rem/1.6 "Georgia", serif; /* Minimal declaration */
}

/* Using Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');

.google-fonts {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

/* Using @font-face for custom fonts */
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Controls how font is displayed while loading */
}

.custom-font {
  font-family: 'MyCustomFont', sans-serif;
}

/* Variable fonts */
.variable-font {
  font-family: 'Inter var', sans-serif;
  font-weight: 375; /* Any value between the font's range */
  font-stretch: 85%; /* If the font supports width axis */
}

/* Font loading optimization */
.optimized-font-loading {
  font-display: swap; /* Text visible immediately with fallback, then swaps */
  font-display: optional; /* Browser may not show font if not ready */
}

/* Using CSS variables for fonts */
:root {
  --primary-font: 'Helvetica Neue', Arial, sans-serif;
  --heading-font: 'Georgia', serif;
  --code-font: 'Courier New', monospace;
  --base-font-size: 16px;
  --line-height: 1.6;
}

.body-text {
  font-family: var(--primary-font);
  font-size: var(--base-font-size);
  line-height: var(--line-height);
}

.heading-text {
  font-family: var(--heading-font);
  font-weight: 700;
}

.code-text {
  font-family: var(--code-font);
}

Font Properties in Detail

Font Family & Fallbacks

The font-family property specifies a prioritized list of font family names. Always provide fallback fonts in case the preferred font isn't available.

font-family: Arial, sans-serif;

font-family: Georgia, serif;

font-family: 'Courier New', monospace;

Font Size Units

CSS offers multiple units for specifying font sizes, each with different use cases.

px - Absolute pixels

em - Relative to parent

rem - Relative to root

% - Percentage of parent

vw - Viewport width units

Font Weight

The font-weight property sets the thickness of characters. Not all fonts support all weight values.

font-weight: 100 (Thin)

font-weight: 400 (Normal)

font-weight: 700 (Bold)

font-weight: 900 (Black)

Web Fonts

Web fonts allow using custom fonts not installed on user's devices via@font-face or services like Google Fonts.

Google Fonts (Roboto)

Custom @font-face

Variable Fonts

Best Practices for Font Usage

Readability & Performance

Limit the number of font families (2-3 per page)
Use system fonts for better performance
Optimize web fonts with appropriate formats (WOFF2)
Use font-display: swap for better perceived performance
Consider variable fonts for flexibility and smaller file sizes

Common Mistakes to Avoid

Using too many different fonts
Not providing adequate fallback fonts
Using non-web-safe fonts without @font-face
Not considering font loading performance
Using font formats that aren't widely supported

Accessibility Considerations

Ensure sufficient contrast between text and background
Use relative units (em, rem) for font sizes to support zooming
Avoid using only font variations (like italic or bold) to convey meaning
Provide adequate line height (1.5 is recommended)
Test your fonts with screen readers and other assistive technologies

Ready to Try It Yourself?

Experiment with CSS font properties in our interactive editor. See your changes in real-time and build your understanding through practice.

< Previous Next >