CSS Font

Subject: css

CSS Font

The CSS font properties are used to control the visual appearance of text on web pages. You can modify the font family, size, weight, style, and more to enhance readability and create visual hierarchy.

Fonts play an important role in branding, user experience, and readability.

Common Font Properties in CSS

  • font-family: Specifies the typeface to be used.
  • font-size: Sets the size of the font.
  • font-weight: Determines the thickness of the characters.
  • font-style: Applies italic or oblique styling.
  • font-variant: Enables small-caps.
  • line-height: Adjusts the vertical spacing between lines of text.
  • font: A shorthand property to combine several font properties into one declaration.

Example: CSS Font Usage

🚀 Try it in Compiler

font-family and Fallbacks

You should always include fallback fonts to ensure proper rendering across different systems:

🚀 Try it in Compiler

If the first font is unavailable, the browser uses the next one in the list.

Font Units

Font sizes can be defined using different units:

  • px: Fixed pixel size
  • em / rem: Relative to parent or root element's font size
  • %: Percentage of the parent font size
  • vw: Relative to viewport width (useful for responsive text)

Font Shorthand Syntax

You can combine multiple font-related properties in one line:

🚀 Try it in Compiler

This sets:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Key Takeaways

  • font-family specifies the typeface and should include fallback options.
  • Use relative units like em or rem for responsive font sizing.
  • Use font-weight to make text bold and font-style for italic text.
  • The font shorthand simplifies font styling by combining multiple properties.
  • Proper font usage improves legibility, consistency, and design aesthetics.
Next: CSS Text