Learn the Front-end Beta Search

font-weight

Draft

Definition

The font-weight CSS property sets the weight (or boldness) of the font. It controls how thick or thin the characters in text appear. Font weight is essential for creating typography hierarchy, emphasizing important content, and improving readability. The property accepts both keyword values and numeric values to provide precise control over text appearance.

Syntax

font-weight: <value>;

Values

Keyword Values

Common weight keywords:

.element {
  font-weight: normal; /* Normal weight (400) */
  font-weight: bold; /* Bold weight (700) */
  font-weight: lighter; /* Lighter than parent */
  font-weight: bolder; /* Bolder than parent */
}

Numeric Values

Precise weight control using numbers:

.element {
  font-weight: 100; /* Thin */
  font-weight: 200; /* Extra Light */
  font-weight: 300; /* Light */
  font-weight: 400; /* Normal */
  font-weight: 500; /* Medium */
  font-weight: 600; /* Semi Bold */
  font-weight: 700; /* Bold */
  font-weight: 800; /* Extra Bold */
  font-weight: 900; /* Black */
}

Examples

Basic Font Weights

HTML

Basic Font Weights:

Thin (100) - This is thin text

Extra Light (200) - This is extra light text

Light (300) - This is light text

Normal (400) - This is normal weight text

Medium (500) - This is medium weight text

Semi Bold (600) - This is semi bold text

Bold (700) - This is bold text

Extra Bold (800) - This is extra bold text

Black (900) - This is black weight text

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic Font Weights:</h3>

  <div class="space-y-4">
    <p class="font-thin">Thin (100) - This is thin text</p>
    <p class="font-extralight">Extra Light (200) - This is extra light text</p>
    <p class="font-light">Light (300) - This is light text</p>
    <p class="font-normal">Normal (400) - This is normal weight text</p>
    <p class="font-medium">Medium (500) - This is medium weight text</p>
    <p class="font-semibold">Semi Bold (600) - This is semi bold text</p>
    <p class="font-bold">Bold (700) - This is bold text</p>
    <p class="font-extrabold">Extra Bold (800) - This is extra bold text</p>
    <p class="font-black">Black (900) - This is black weight text</p>
  </div>
</div>

Font Weight in Typography Hierarchy

HTML

Font Weight in Typography Hierarchy:

Main Heading (Black)

This is the most important heading with maximum weight for strong visual impact.

Section Heading (Bold)

This is a section heading with bold weight to establish clear hierarchy.

Subsection (Semi Bold)

This is a subsection with semi-bold weight for moderate emphasis.

Minor Heading (Medium)

This is a minor heading with medium weight for subtle emphasis.

This is body text with normal weight for optimal readability.

This is caption text with light weight for secondary information.

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Font Weight in Typography Hierarchy:</h3>

  <div class="space-y-6">
    <div>
      <h1 class="text-4xl font-black text-gray-900 mb-2">Main Heading (Black)</h1>
      <p class="text-lg font-normal text-gray-600">This is the most important heading with maximum weight for strong visual impact.</p>
    </div>

    <div>
      <h2 class="text-3xl font-bold text-gray-900 mb-2">Section Heading (Bold)</h2>
      <p class="text-base font-normal text-gray-600">This is a section heading with bold weight to establish clear hierarchy.</p>
    </div>

    <div>
      <h3 class="text-2xl font-semibold text-gray-900 mb-2">Subsection (Semi Bold)</h3>
      <p class="text-base font-normal text-gray-600">This is a subsection with semi-bold weight for moderate emphasis.</p>
    </div>

    <div>
      <h4 class="text-xl font-medium text-gray-900 mb-2">Minor Heading (Medium)</h4>
      <p class="text-sm font-normal text-gray-600">This is a minor heading with medium weight for subtle emphasis.</p>
    </div>

    <div>
      <p class="text-base font-normal text-gray-700">This is body text with normal weight for optimal readability.</p>
      <p class="text-sm font-light text-gray-500">This is caption text with light weight for secondary information.</p>
    </div>

  </div>
</div>

Font Weight in Components

HTML

Font Weight in Components:

Card Component:

Card Title

This is the card description with normal weight for readability.

Last updated: 2 hours ago

Button Component:

Form Component:

Helper text with normal weight

Navigation Component:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Font Weight in Components:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Card Component:</h4>
      <h5 class="text-xl font-bold text-gray-900 mb-2">Card Title</h5>
      <p class="text-base font-normal text-gray-600 mb-3">This is the card description with normal weight for readability.</p>
      <p class="text-sm font-medium text-gray-500">Last updated: 2 hours ago</p>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Button Component:</h4>
      <div class="space-x-2">
        <button class="px-3 py-1 text-sm font-medium bg-blue-500 text-white rounded hover:bg-blue-600">Medium Weight</button>
        <button class="px-4 py-2 text-sm font-semibold bg-green-500 text-white rounded hover:bg-green-600">Semi Bold</button>
        <button class="px-6 py-3 text-base font-bold bg-purple-500 text-white rounded hover:bg-purple-600">Bold</button>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Form Component:</h4>
      <div class="space-y-3">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Form Label</label>
          <input type="text" class="w-full px-3 py-2 text-base font-normal border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Input text">
        </div>
        <p class="text-xs font-normal text-gray-500">Helper text with normal weight</p>
      </div>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="text-lg font-semibold mb-3">Navigation Component:</h4>
      <nav class="flex space-x-4">
        <a href="#" class="text-sm font-medium text-gray-600 hover:text-blue-600">Home</a>
        <a href="#" class="text-sm font-medium text-gray-600 hover:text-blue-600">About</a>
        <a href="#" class="text-sm font-semibold text-blue-600">Services</a>
        <a href="#" class="text-sm font-medium text-gray-600 hover:text-blue-600">Contact</a>
      </nav>
    </div>

  </div>
</div>

Browser Support

The font-weight property has excellent browser support:

  • All browsers: Full support for basic font weight values
  • Modern browsers: Full support for all numeric values (100-900)
  • Internet Explorer: Full support (IE6+)

Best Practices

  1. Hierarchy: Use consistent font weights to establish clear visual hierarchy
  2. Readability: Ensure sufficient contrast between different weights
  3. Consistency: Use the same weight for similar elements throughout your design
  4. Accessibility: Don’t rely solely on font weight to convey important information
  5. Performance: Limit the number of different font weights to improve loading times
  6. Responsive design: Consider adjusting font weights for different screen sizes

Common Use Cases

  • Typography hierarchy: Creating visual hierarchy with different font weights
  • Emphasis: Highlighting important text and information
  • Component styling: Setting appropriate weights for UI components
  • Brand consistency: Maintaining consistent typography across applications
  • Accessibility: Improving readability and visual distinction
  • Responsive design: Adjusting font weights for different screen sizes
  • Print styles: Optimizing font weights for print media
  • font-family: Sets the font family
  • font-size: Sets the font size
  • font-style: Sets the font style
  • font-variant: Sets the font variant
  • font: Shorthand for all font properties
  • text-decoration: Sets text decoration
  • color: Sets the text color

Related posts