Font Size, Weight, Style, and Line Height

Have you ever opened a blog post or news article and found it so easy and relaxing to read that you finished the entire article without tiring your eyes? Or conversely, opened a website where the text was tiny, crammed tightly together, and gave you an instant headache? 📖

The difference between pleasant reading and eye strain comes down to 4 typography properties:

1. 1
   font-size (How large the letters are)
2. 2
   font-weight (How thick or bold the letters are)
3. 3
   font-style (Normal or slanted italics)
4. 4
   line-height (The vertical breathing room between lines)

Let us master these essential properties using school classroom analogies!

The Blackboard & Ruled Notebook Analogy 📝

Think about how your teacher writes on the blackboard and how you write in your school notebook:

+-------------------------------------------------------------------------+
|                    THE 4 TYPOGRAPHY PILLARS                             |
+-------------------------------------------------------------------------+
| 1. font-size    --> Big chalk letters for Chapter Titles (32px),        |
|                     medium letters for Subheadings, small for notes.    |
|                                                                         |
| 2. font-weight  --> Pressing the chalk firmly on the board for BOLD,    |
|                     or writing gently with light pressure (Thin/Normal).|
|                                                                         |
| 3. font-style   --> Slanting scientific names or foreign words          |
|                     (Italics for emphasis: Homo sapiens).               |
|                                                                         |
| 4. line-height  --> The ruled lines in your English four-line notebook! |
|                     Leaving space so descenders ('g', 'y', 'p') don't   |
|                     crash into tall letters ('h', 'k', 'l') below!      |
+-------------------------------------------------------------------------+

1. font-size (Pixels vs REMs)

Sets the physical size of your text on the screen.

Two Common Units:

1. 1
   Pixels (px): Fixed absolute size.

1. 1
   REMs (rem): Relative to the Root HTML font size (Modern standard ⭐).

By default, almost all web browsers set root font size to 16px.

• 1rem = 16px
• 1.5rem = 24px (1.5 * 16)
• 2rem = 32px (2 * 16)

2. font-weight (Boldness & Thickness)

Controls how thick or thin the strokes of your characters appear.

You can use keywords or numeric values from 100 to 900:

Common Keywords:

3. font-style (Italics)

Used primarily to slant text for emphasis, book titles, scientific terms, or quotes.

4. line-height (The Secret to Comfortable Reading ⭐)

line-height controls the vertical distance between lines of text in a paragraph.

The Problem of Default Text:

By default, browser line-height is very tight (around 1.1 to 1.2). When a paragraph wraps across 5 lines, the lines are cramped together like people in a crowded bus!

The Best Practice: Use Unitless Numbers!

Always declare line-height as a unitless number (without px):

Why unitless? Because child elements (headings, small captions) will automatically multiply their own font-size by 1.6, preventing strange inheritance bugs!

The All-in-One font Shorthand

You can combine style, weight, size, line-height, and family into a single declaration:

Common Beginner Mistakes (Do's and Don'ts)

Quick Revision Summary

• font-size sets text size in px or responsive rem (1rem = 16px).
• font-weight sets thickness: 400 is normal, 700 is bold.
• font-style: italic slants characters for quotes, emphasis, and citations.
• line-height sets vertical line spacing; unitless 1.5 to 1.6 is optimal for readability.
• In the font shorthand, size/line-height are joined by a forward slash (18px/1.5).

Practice Quiz

Test your understanding with these multiple-choice questions:

1. If the browser root font size is the standard 16px, what is the computed size of font-size: 1.5rem;?

A. 20px B. 24px C. 32px D. 18px Answer: B Explanation: 1.5rem is calculated as 1.5 * 16px = 24px.

2. Which numeric font-weight corresponds to standard normal body text?

A. 100 B. 400 C. 700 D. 900 Answer: B Explanation: On the numeric weight scale, 400 represents standard normal text, while 700 represents bold.

3. Why is it considered best practice to declare line-height as a unitless value (such as 1.6) rather than with pixels?

A. Because computers do not understand pixels B. Because unitless line-height scales proportionally with whatever font-size child elements inherit C. Because unitless numbers load faster over the internet D. Because pixels are deprecated in CSS Answer: B Explanation: Unitless line-height (e.g., 1.5 or 1.6) acts as a proportional multiplier of the element's current font-size, preventing child elements from inheriting rigid, mismatched line heights.

4. In the shorthand declaration font: bold 16px/1.5 Arial, sans-serif;, what does the value 1.5 specify?

A. Letter spacing B. Font weight C. Line height D. Word spacing Answer: C Explanation: In the CSS font shorthand syntax, the value immediately following the forward slash after font-size specifies the line-height (font-size/line-height).

5. Which CSS property is used to make text appear in slanted italics?

A. text-decoration: italic; B. font-weight: italic; C. font-style: italic; D. text-transform: italic; Answer: C Explanation: The font-style property controls whether text is rendered upright (normal) or slanted (italic).

Practice Challenge (Try It Yourself)

1. 1
   Open your code editor and create article-reading.html.
2. 2
   Build an educational article formatted for maximum reading comfort:

1. 1
   Open the file in your browser and notice how the combination of font-size: 1.05rem and line-height: 1.7 makes reading pure pleasure! 🎯