CSS Fonts

Learn how to style text with CSS font properties including font-family, font-size, font-weight, and modern web fonts.

CSS font properties control the appearance and typography of text on web pages. Mastering fonts is essential for creating readable, accessible, and visually appealing content.

Font Family

The font-family property specifies the typeface for text.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Georgia", "Times New Roman", serif;
}

code {
  font-family: "Courier New", monospace;
}

Font Stack

Always provide fallback fonts:

.text {
  /* Preferred, fallback 1, fallback 2, generic family */
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
}

Generic Font Families

serif - fonts with serifs (e.g., Times New Roman, Georgia)
sans-serif - fonts without serifs (e.g., Arial, Helvetica)
monospace - fixed-width fonts (e.g., Courier, Consolas)
cursive - decorative, handwriting-style fonts
fantasy - decorative fonts

.element {
  /* Absolute units */
  font-size: 16px; /* Pixels */
  font-size: 12pt; /* Points */

  /* Relative units */
  font-size: 1.5em; /* Relative to parent */
  font-size: 1.5rem; /* Relative to root */
  font-size: 150%; /* Percentage */

  /* Viewport units */
  font-size: 5vw; /* 5% of viewport width */
  font-size: 3vh; /* 3% of viewport height */
}

Recommended

Use rem for most text sizing - it's relative to the root font size and makes scaling easier.

Font Weight

Control text boldness:

.light {
  font-weight: 300; /* Light */
}

.normal {
  font-weight: 400; /* Normal (default) */
  font-weight: normal;
}

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

.bolder {
  font-weight: bolder; /* Relative to parent */
}

.lighter {
  font-weight: lighter; /* Relative to parent */
}

Common Font Weights

100 - Thin
200 - Extra Light
300 - Light
400 - Normal (regular)
500 - Medium
600 - Semi Bold
700 - Bold
800 - Extra Bold
900 - Black

Font Style

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Font Variant

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

.normal {
  font-variant: normal;
}

Line Height

Control spacing between lines:

body {
  line-height: 1.6; /* Recommended for readability */
}

.tight {
  line-height: 1.2;
}

.loose {
  line-height: 2;
}

.specific {
  line-height: 24px; /* Fixed height */
}

Best Practice

Use unitless values for line-height (e.g., 1.6) - they scale better with font size changes.

Font Shorthand

Combine multiple font properties:

.text {
  /* font: [font-style] [font-variant] [font-weight] font-size/line-height font-family */
  font:
    italic small-caps bold 16px/1.6 Arial,
    sans-serif;
}

/* Common patterns */
.heading {
  font:
    700 2rem/1.2 "Georgia",
    serif;
}

.body {
  font:
    400 1rem/1.6 "Helvetica",
    sans-serif;
}

Web Fonts (Google Fonts)

<!-- In HTML head -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: "Roboto", sans-serif;
}

Custom Fonts (@font-face)

@font-face {
  font-family: "CustomFont";
  src:
    url("fonts/custom-font.woff2") format("woff2"),
    url("fonts/custom-font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Font Display Property

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* Recommended for performance */
  /* Options: auto, block, swap, fallback, optional */
}

Practical Examples

Typography System

:root {
  --font-primary: "Inter", sans-serif;
  --font-heading: "Playfair Display", serif;
  --font-mono: "Fira Code", monospace;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

Responsive Typography

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Emphasizing Text

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

mark {
  background-color: yellow;
  font-weight: 600;
}

Variable Fonts

Modern fonts with adjustable properties:

@font-face {
  font-family: "InterVariable";
  src: url("Inter-Variable.woff2") format("woff2");
  font-weight: 100 900; /* Weight range */
}

.text {
  font-family: "InterVariable", sans-serif;
  font-variation-settings: "wght" 450; /* Custom weight */
}

Best Practices

Font Best Practices

Use system fonts for better performance - Limit web fonts to 2-3 families - Use font-display: swap for web fonts - Provide fallback fonts in font-family - Use rem/em for scalable typography - Set line-height between 1.4-1.8 for body text - Maintain consistent font scale - Test fonts at different sizes - Consider accessibility (minimum 16px for body) - Use font-weight 400-700 for better readability

System Font Stack

Use native system fonts for best performance:

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Accessibility

Minimum 16px for body text
Avoid font sizes below 14px
Ensure sufficient contrast
Don't rely on font style alone for meaning
Test with different zoom levels
Use relative units for scalability

Browser Support

All font properties have excellent browser support. Variable fonts require modern browsers.

Typography is fundamental to web design - master fonts to create beautiful, readable interfaces!

CSS font properties control the appearance and typography of text on web pages. Mastering fonts is essential for creating readable, accessible, and visually appealing content.

Font Family

The font-family property specifies the typeface for text.

body {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Georgia", "Times New Roman", serif;
}

code {
  font-family: "Courier New", monospace;
}

Font Stack

Always provide fallback fonts:

.text {
  /* Preferred, fallback 1, fallback 2, generic family */
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif;
}

Generic Font Families

serif - fonts with serifs (e.g., Times New Roman, Georgia)
sans-serif - fonts without serifs (e.g., Arial, Helvetica)
monospace - fixed-width fonts (e.g., Courier, Consolas)
cursive - decorative, handwriting-style fonts
fantasy - decorative fonts

.element {
  /* Absolute units */
  font-size: 16px; /* Pixels */
  font-size: 12pt; /* Points */

  /* Relative units */
  font-size: 1.5em; /* Relative to parent */
  font-size: 1.5rem; /* Relative to root */
  font-size: 150%; /* Percentage */

  /* Viewport units */
  font-size: 5vw; /* 5% of viewport width */
  font-size: 3vh; /* 3% of viewport height */
}

Recommended

Use rem for most text sizing - it's relative to the root font size and makes scaling easier.

Font Weight

Control text boldness:

.light {
  font-weight: 300; /* Light */
}

.normal {
  font-weight: 400; /* Normal (default) */
  font-weight: normal;
}

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

.bolder {
  font-weight: bolder; /* Relative to parent */
}

.lighter {
  font-weight: lighter; /* Relative to parent */
}

Common Font Weights

100 - Thin
200 - Extra Light
300 - Light
400 - Normal (regular)
500 - Medium
600 - Semi Bold
700 - Bold
800 - Extra Bold
900 - Black

Font Style

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

Font Variant

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

.normal {
  font-variant: normal;
}

Line Height

Control spacing between lines:

body {
  line-height: 1.6; /* Recommended for readability */
}

.tight {
  line-height: 1.2;
}

.loose {
  line-height: 2;
}

.specific {
  line-height: 24px; /* Fixed height */
}

Best Practice

Use unitless values for line-height (e.g., 1.6) - they scale better with font size changes.

Font Shorthand

Combine multiple font properties:

.text {
  /* font: [font-style] [font-variant] [font-weight] font-size/line-height font-family */
  font:
    italic small-caps bold 16px/1.6 Arial,
    sans-serif;
}

/* Common patterns */
.heading {
  font:
    700 2rem/1.2 "Georgia",
    serif;
}

.body {
  font:
    400 1rem/1.6 "Helvetica",
    sans-serif;
}

Web Fonts (Google Fonts)

<!-- In HTML head -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
  rel="stylesheet"
/>

body {
  font-family: "Roboto", sans-serif;
}

Custom Fonts (@font-face)

@font-face {
  font-family: "CustomFont";
  src:
    url("fonts/custom-font.woff2") format("woff2"),
    url("fonts/custom-font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Improves loading performance */
}

body {
  font-family: "CustomFont", Arial, sans-serif;
}

Font Display Property

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap; /* Recommended for performance */
  /* Options: auto, block, swap, fallback, optional */
}

Practical Examples

Typography System

:root {
  --font-primary: "Inter", sans-serif;
  --font-heading: "Playfair Display", serif;
  --font-mono: "Fira Code", monospace;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

Responsive Typography

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Emphasizing Text

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

mark {
  background-color: yellow;
  font-weight: 600;
}

Variable Fonts

Modern fonts with adjustable properties:

@font-face {
  font-family: "InterVariable";
  src: url("Inter-Variable.woff2") format("woff2");
  font-weight: 100 900; /* Weight range */
}

.text {
  font-family: "InterVariable", sans-serif;
  font-variation-settings: "wght" 450; /* Custom weight */
}

Best Practices

Font Best Practices

Use system fonts for better performance - Limit web fonts to 2-3 families - Use font-display: swap for web fonts - Provide fallback fonts in font-family - Use rem/em for scalable typography - Set line-height between 1.4-1.8 for body text - Maintain consistent font scale - Test fonts at different sizes - Consider accessibility (minimum 16px for body) - Use font-weight 400-700 for better readability

System Font Stack

Use native system fonts for best performance:

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Accessibility

Minimum 16px for body text
Avoid font sizes below 14px
Ensure sufficient contrast
Don't rely on font style alone for meaning
Test with different zoom levels
Use relative units for scalability

Browser Support

All font properties have excellent browser support. Variable fonts require modern browsers.

Typography is fundamental to web design - master fonts to create beautiful, readable interfaces!

CSS Fonts

On this page

CSS Fonts

On this page