Lesson 16: Mastering Font Weight and Style

Learn how to control text emphasis with font-weight and font-style properties. Understand bold, italic, and oblique text, and how to use them effectively in your designs.

Start Learning

Understanding Font Weight and Style

Font weight and style are essential for creating visual hierarchy and emphasis in your typography. They help guide readers' attention and convey meaning beyond the text itself.

Font Weight: Controls the thickness of text characters. Values range from 100 (thin) to 900 (heavy), with 400 as normal and 700 as bold.
Font Style: Controls the posture of text characters. Values include normal, italic, and oblique.
Italic vs. Oblique: Italic uses a specially designed slanted version of the font, while oblique simply slants the normal font.

Font Weight Examples

100
Thin Weight
200
Extra Light
300
Light
400
Normal
500
Medium
600
Semi Bold
700
Bold
800
Extra Bold
900
Black

Font Style Examples

Normal Style
font-style: normal;
Italic Style
font-style: italic;
Oblique Style
font-style: oblique;
Oblique 10deg
font-style: oblique 10deg;

CSS Font Weight and Style Syntax

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

.subheading {
  font-weight: 600;
}

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

.light-text {
  font-weight: 300;
}

/* Font styles */
.emphasis {
  font-style: italic;
}

.code {
  font-style: oblique;
}

/* Removing default styles */
em {
  font-style: normal;
}

/* Combining with other properties */
.callout {
  font-weight: 700;
  font-style: italic;
  color: var(--primary);
}

Advanced Properties and Values

Modern CSS provides more control over font weight and style, including variable fonts and precise angle control for oblique text.

Variable Fonts

Variable fonts allow continuous variation in weight, width, and other attributes. This provides greater flexibility and reduces the number of font files needed.

This text uses variable font weight 
@font-face {
  font-family: 'InterVariable';
  src: url('Inter.var.woff2') format('woff2-variations');
  font-weight: 100 900;
}

.variable-text {
  font-family: 'InterVariable', sans-serif;
  font-variation-settings: 'wght' 375;
}

Oblique Angle

With modern CSS, you can specify the exact angle of oblique text. This provides more control over the slant of your text.

Oblique text with 15deg angle 
.custom-oblique {
  font-style: oblique 15deg;
}

/* Fallback for older browsers */
@supports not (font-style: oblique 15deg) {
  .custom-oblique {
    font-style: italic;
    transform: skewX(-15deg);
    display: inline-block;
  }
}

Responsive Typography with Font Weight

/* Base styles */
h1 {
  font-weight: 700;
}

/* Adjust weight for smaller screens */
@media (max-width: 768px) {
  h1 {
    font-weight: 600; /* Slightly lighter on mobile */
  }
  
  h2 {
    font-weight: 500;
  }
}

/* Using clamp for fluid typography */
.hero-heading {
  font-weight: clamp(600, 8vw, 800);
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Interactive Font Demo

Experiment with different font weight and style options and see the results in real-time:

400 (Normal)
Customize your font weight and style 
.preview {
  font-weight: 400;
  font-style: normal;
}

Real-World Use Cases

Heading Hierarchy

Main Heading (800)

Subheading (700)

Section Heading (600)

Use varying font weights to establish a clear visual hierarchy for headings.

Emphasis in Text

This is a bold word, this is an italic word, and this is a bold italic word.

Combine font weight and style to create different levels of emphasis in your content.

Code Samples

function calculateTotal(price, tax) {
  return price * (1 + tax);
}

Use oblique style for code samples to differentiate them from regular text.

Best Practices

Follow these guidelines for effective use of font weight and style:

Establish Clear Hierarchy: Use consistent weight variations to create a visual content hierarchy.
Limit Bold Usage: Use bold sparingly for maximum impact on key elements.
Semantic HTML First: Use <strong> and <em> tags for semantic meaning before applying visual styles.
Consider Readability: Avoid very light weights for body text, especially on low-resolution screens.

Font Weight vs. Style Usage

Purpose Recommended Property Examples Main Headings font-weight: 700-800 Page titles, section headers Subheadings font-weight: 600-700 Section subheadings, card titles Body Text font-weight: 400-500 Paragraphs, list items Emphasis font-style: italic Key terms, foreign phrases Code & Technical Terms font-style: oblique Code samples, technical terms Call-to-Action font-weight: 700 + italic Buttons, important notices

Creative Typography Techniques

/* Dynamic heading with variable weight */
h1 {
  font-weight: clamp(600, 8vw, 800);
}

/* Italic first paragraph */
article > p:first-of-type {
  font-style: italic;
  font-weight: 450;
}

/* Gradual weight change in hero text */
.hero-text span {
  display: inline-block;
}

.hero-text span:nth-child(1) { font-weight: 300; }
.hero-text span:nth-child(2) { font-weight: 400; }
.hero-text span:nth-child(3) { font-weight: 500; }
.hero-text span:nth-child(4) { font-weight: 600; }
.hero-text span:nth-child(5) { font-weight: 700; }

/* Responsive italic adjustment */
@media (max-width: 768px) {
  .long-quote {
    font-style: normal;
  }
}

Common Mistakes to Avoid

Be aware of these pitfalls when using font weight and style:

Overusing Bold

Making everything bold reduces its impact and makes content harder to scan.

Solution: Reserve bold for key elements like headings and important calls-to-action.

Excessive Italics

Long sections of italic text are harder to read and strain the eyes.

Solution: Limit italics to short phrases, quotes, or specialized terms.

Ignoring Font Capabilities

This light weight may not render well on all systems

Solution: Check font weight support and provide fallbacks for unsupported weights.

Next Steps

Now that you understand font weight and style, continue to the next lesson to learn about text shadows and other text effects.

Previous Lesson Next Lesson: Drop Shadow