Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more

Day 16 : Typography & Web Fonts (Detailed)

🎨 Day 16 — Typography & Web Fonts (Detailed)

Typography is more than picking pretty fonts — it’s about readability, hierarchy and tone. On the web, type choices affect accessibility, perceived performance, and brand. This lesson covers font-family strategy, units, responsive scale, metrics (leading/kerning/tracking), variable fonts, loading strategy, and practical recipes.

1 — Font stacks & fallback strategy

Always provide a fallback chain: custom → system → generic family. Example:

font-family: "Poppins", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Why: if the first font fails to load the browser uses the next one — avoiding layout jumps and preserving readability.

2 — Units: px, em, rem, %, vw

  • px — absolute pixel size (predictable but less flexible).
  • em — relative to the element’s font-size (multiplicative).
  • rem — relative to root (<html>) font-size — very handy for global scaling.
  • vw / vh — viewport units for very large responsive typography.

Common practice: set base on <html> (e.g., html { font-size: 16px; }) then use rem across the site.

3 — Line-height, letter-spacing, and measure

  • line-height (leading): use unitless values like 1.5 so the computed value scales with sizes.
  • measure (line length): aim for ~50–75 characters per line for comfortable reading.
  • letter-spacing (tracking): slight adjustments improve legibility for headings or all-caps text.

4 — Heading scale & modular scale

Create a consistent typographic scale using multipliers (1.25–1.333). Example:

:root {
  --step-0: 1rem;    /* base */
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }

5 — Web fonts: loading strategies & performance

  • <link rel="preload" as="font" for critical fonts to reduce FOUT/FOIT.
  • font-display (swap/optional/block): use font-display: swap to show text using fallback while font loads.
  • Subset fonts and host via CDN (or Google Fonts). Use variable fonts to reduce multiple weights payload.

6 — Variable fonts

Variable fonts pack many weights/styles into a single file, enabling smooth weight transitions and small payloads.

@font-face {
  font-family: 'MyVar';
  src: url('MyVar.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}
h1 { font-family: 'MyVar'; font-weight:700; }

Interactive — Try typography changes

Edit the CSS and see typography changes live. Experiment with font-size units and line-height to see effects on readability.


Practice tasks

  1. Create a responsive type scale (base:16px → h1 = 2.5rem at desktop, 1.6rem on mobile).
  2. Use font-display: swap for a Google Font and observe FOUT vs FOIT.
  3. Try a variable font and animate font-weight on hover for headings.

Comments

Post a Comment