Font Properties

on

 Understanding CSS Font Properties



In this lesson, we’ll explore the font-related properties in CSS that control how text looks on a webpage.

We’ve already seen the color property, which changes the text color.
Along with that, the most commonly used font properties are:

  • font-weight → controls the thickness of the text

  • font-size → controls the size of the text

  • font-family → sets the typeface or font style

Font-size

The font-size property lets you set the size of text, for example: 20px.

Common units for font-size:

  • px (pixel) → 1px = 1/96 inch ≈ 0.26mm, a very tiny square dot.

  • pt (point) → 1pt = 1/72 inch ≈ 0.35mm, slightly larger than a pixel.

    • In Microsoft Word, when you choose 12-size text, that’s actually 12pt—which is similar in size on the web.

em & rem

  • em → Relative to the font size of the parent element.

    • 1em = 100% of the parent size

    • 2em = twice the parent size

  • rem → Relative to the root (html) font size.

    • 1rem = 100% of the root size

    • 2rem = twice the root size

  • Tip: Using rem is often better for consistent sizing because it always refers to the root size.

Font-weight

  • Can be set as normal or bold.

  • Numeric values range from 100 (thin) to 900 (extra bold).

  • You can also use lighter or bolder relative to the parent element’s weight.

Font-family

  • Defines which font is used for the text.

  • Since fonts may not be available on all devices, always provide a fallback font.
    Example:

    font-family: Helvetica, sans-serif;

  • sans-serif → clean, modern lines without decorative edges.

  • serif → traditional style with small decorative strokes (“feet”) at the ends.

  • If the font name has spaces (e.g., Times New Roman), wrap it in quotes:

    font-family: "Times New Roman", serif;

Custom Fonts with Google Fonts

  • Visit fonts.google.com to find free fonts.

  • Select the font and weight you want, copy the <link> tag, and paste it into your HTML <head>.

  • Then, set it in CSS using the font name.

Comments

Post a Comment