Font properties

• What is a front property? Is a property that styles the font in our HTML

• What are the 3 most common font properties? Font-size, font-weight, font-family

• What is each font property used for? First sets size, second one boldness, third one the typography

• What are the four ways to represent a font size? 1px, 1pt, 1em & 1rem

• What's the difference between those metrics?

  • Statics: don't vary throughout the whole development

    • Px = 0.26mm

    • Pt = 0.35mm

  • Relatives: may vary depending of other tag's value

    • 1em = 100% parent (is not that recommended due to parent may vary)

    • 1rem = 100% root

• How to represent a font weight?

  • Keywords = normal, bold, light

  • Relatives = lighter (-100), bolder (+100)

  • Number = 100-900

• How to import new fonts to HTML file?

  • Search your font in Google Fonts

  • Copy the link for HTML and paste it in head section

    <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap" rel="stylesheet">

• Copy the css rule to apply it into your stylesheet

  • h1 {font-family: 'Space Grotesk', sans-serif;}

Key takeaway

We took a look onto font properties. Font-size measured by static metrics pxls & pts ; relative metrics em & rem. Font-weight measured by keywords, relative keywords (lighter &  bolder), number (100-900). Font family is set by an HTML link and CSS rule applied.