MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
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:
font-size (How large the letters are)font-weight (How thick or bold the letters are)font-style (Normal or slanted italics)line-height (The vertical breathing room between lines)Let us master these essential properties using school classroom analogies!
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! |
+-------------------------------------------------------------------------+font-size (Pixels vs REMs)Sets the physical size of your text on the screen.
px): Fixed absolute size.rem): Relative to the Root HTML font size (Modern standard ⭐).By default, almost all web browsers set root font size to 16px.
1rem = 16px1.5rem = 24px (1.5 * 16)2rem = 32px (2 * 16)rem:
If an elderly user or visually impaired student changes their smartphone or browser settings to "Large Text", websites built with rem scale up smoothly to keep text accessible!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:
300 or 600) if the font family actually has those weight files installed. If a font only comes in normal and bold, the browser will approximate the closest match.font-style (Italics)Used primarily to slant text for emphasis, book titles, scientific terms, or quotes.
line-height (The Secret to Comfortable Reading ⭐)line-height controls the vertical distance between lines of text in a paragraph.
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!
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!
font ShorthandYou can combine style, weight, size, line-height, and family into a single declaration:
18px/1.5: size and line-height must be separated by a forward slash (/). Also, in shorthand, font-size and font-family are mandatory!| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
font-weight: 700px; (Adding px to weight) | font-weight: 700; or bold. | Font weight is a dimensionless scale (100 to 900), never measured in pixels. |
Using line-height: 25px on headings. | Use unitless numbers: line-height: 1.3;. | A fixed 25px line-height on a 36px heading causes lines of text to collide and overlap! |
Using font-size: 12px for main paragraph text. | Keep body text between 15px and 18px (1rem). | Anything below 14px strains students' eyes on modern high-DPI screens. |
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.font shorthand, size/line-height are joined by a forward slash (18px/1.5).Test your understanding with these multiple-choice questions:
font-size: 1.5rem;?font-weight corresponds to standard normal body text?line-height as a unitless value (such as 1.6) rather than with pixels?font: bold 16px/1.5 Arial, sans-serif;, what does the value 1.5 specify?article-reading.html.font-size: 1.05rem and line-height: 1.7 makes reading pure pleasure! 🎯In the next lesson, we will continue your web styling journey with Text Alignment, Decoration, Transform, and Spacing (Text and Fonts).
👉 Continue to Next Lesson: Text Alignment, Decoration, Transform, and Spacing →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Font Families and Web-Safe Fonts | Text Alignment, Decoration, Transform, and Spacing |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.