Quartz 4

Font Properties

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

✍️ CSS Font Properties – Ultimate Guide & Notes

📌 Why Font Properties Matter in Web Design

Fonts are more than just letters—they define your website’s tone, readability, brand identity, and visual hierarchy. With CSS, we can finely control how our text looks and behaves using several font-related properties.

Let’s dive deep into the most common and powerful ones:

🧱 1. font-size – Controlling Text Size

🔹 What it does:

Sets the size of the font. The size can be defined in several units.

📏 Common Units for font-size

UnitMeaningRelative/AbsoluteNotes
pxPixelsAbsoluteMost commonly used; 1px = 1/96 of an inch (~0.26mm)
ptPointsAbsolute1pt = 1/72 of an inch (~0.35mm); familiar from Word Docs
emRelative to parentRelative1em = 100% of parent font-size
remRelative to root (html)Relative1rem = 100% of root font-size
%Percentage of parentRelative100% = parent size
x-large, small, etc.Keyword sizesRelativePredefined by browser styles

🧪 Example: font-size with different units

/* Absolute */
h1 {
  font-size: 24px;
}
p {
  font-size: 12pt;
}
 
/* Relative */
h2 {
  font-size: 2em; /* 2x parent font size */
}
h3 {
  font-size: 1.5rem; /* 1.5x root font size */
}

💡 EM vs REM: Key Difference

Featureemrem
Based onParent elementRoot (usually <html>)
FlexibleYes, but can get confusing with deep nestingYes, consistent and predictable
Best ForNested components needing proportional scalingConsistent, site-wide typography

🔧 Why developers prefer rem:

Using rem ensures consistent font sizing across a website regardless of nesting, avoiding unexpected results caused by changing parent sizes.

💪 2. font-weight – Boldness of Text

🔹 What it does:

Controls how thick or light the text appears.

🔢 Values for font-weight:

KeywordNumeric Value
normal400
bold700
lighter, bolderRelative to parent
100 to 900Fine-tuned control (100 = thin, 900 = very bold)

🧪 Example:

p {
  font-weight: normal; /* or 400 */
}
 
h1 {
  font-weight: 700; /* bold */
}
 
.light-text {
  font-weight: 200;
}

💡 Not all fonts support every weight from 100–900. Check the available weights on Google Fonts.

✍️ 3. font-family – Choosing the Typeface

🔹 What it does:

Defines the font style (e.g., Arial, Times New Roman, Roboto).

📚 Syntax:

font-family: "Font Name", fallback-font;

⚠️ Multi-word font names need quotes:

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

🧬 Font Stack Example:

font-family: "Helvetica", Arial, sans-serif;

  • If the user’s system doesn’t have Helvetica → fallback to Arial

  • If Arial isn’t available → fallback to any generic sans-serif

📖 Serif vs Sans-serif

TypeDescriptionExample Fonts
SerifHas “feet” or decorative strokesTimes New Roman, Georgia
Sans-serifClean, no strokesArial, Helvetica, Roboto
MonospaceEqual-width lettersCourier, Consolas
CursiveHandwritten styleBrush Script, Pacifico
FantasyDecorative/stylizedImpact, Jokerman

🌍 Using Custom Fonts (Google Fonts)

  1. Visit: https://fonts.google.com

  2. Select a font and weights you want (e.g., Regular 400, Bold 700)

  3. Click “</> Get Embed Code”

  4. Copy the <link> tag into your HTML <head> (outside the <style> tag!)

  5. Copy the corresponding font-family declaration into your CSS

🧪 Example:

<!-- In the HTML head -->
<link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
 
<style>
  h1 {
    font-family: 'Caveat', cursive;
  }
</style>

🧠 Always provide a generic fallback like cursive, serif, or sans-serif.

📐 4. text-align – Text Alignment

🔹 What it does:

Controls the horizontal alignment of text within its container.

ValueEffect
leftAligns text to the left (default for LTR)
rightAligns text to the right
centerCenters the text
justifyStretches text to align with both edges
start / endRelative to the reading direction

🧪 Example:

p {
  text-align: right;
}
h1 {
  text-align: center;
}

🧪 Final Exercise Review (From the Lesson)

✅ Skills Practiced:

  • Changing text color using named color (coral)

  • Setting font-size with rem (2rem)

  • Applying font-weight numerically (900)

  • Using Google Fonts via <link> and font-family

  • Applying text-align: right

  • Adjusting the root font-size in the <html> tag (e.g., 30px)

✅ Why it’s useful:

  • Reinforces the difference between em and rem

  • Shows how to use external fonts correctly

  • Demonstrates relative text sizing using the root context

  • Encourages accessibility through fallback fonts

🧠 Summary: Font Styling Properties Cheat Sheet

PropertyPurposeExample
font-sizeSize of textfont-size: 18px;
font-weightThickness of textfont-weight: 700;
font-familyFont stylefont-family: Arial, sans-serif;
text-alignText alignmenttext-align: center;

🧰 Pro Developer Tips

  • Use rem for scalable and consistent sizing across your site.

  • Always provide fallback fonts in your font-family.

  • Use Google Fonts to bring in beautiful typography.

  • Combine font-weight, font-size, and font-family for a polished UI.

  • Test your fonts across browsers and devices.

🔗 Additional Resources

References

Graph View

Backlinks