Day 3: Typography: Fonts, Text & Google Fonts

<style>
.serif { font-family: Georgia, "Times New Roman", serif; }
.sans  { font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif; }
.mono  { font-family: Consolas, "Courier New", monospace; }
.hand  { font-family: "Comic Sans MS", cursive; }
</style>

<p class="serif">Serif – traditional, newspapers, wedding cards</p>
<p class="sans">Sans-serif – clean, modern, apps and websites</p>
<p class="mono">Monospace – code: print("Hello")</p>
<p class="hand">Cursive – only for decoration, never for paragraphs</p>

<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=Poppins:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;600&display=swap" rel="stylesheet">

body {
  font-family: "Poppins", system-ui, sans-serif;
}
:lang(hi) {                       /* any element with lang="hi" */
  font-family: "Noto Sans Devanagari", "Poppins", sans-serif;
}

<style>
html { font-size: 100%; }          /* = 16px, respects user setting */
h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: 1.5rem;  font-weight: 700; line-height: 1.25; margin: 1rem 0 .4rem; }
p  { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 1rem; }
small { font-size: .875rem; color: #6b7280; }
</style>

<h1>Class 10 Science Notes</h1>
<small>Updated 25 Oct · 6 min read</small>
<h2>Chapter 1: Chemical Reactions</h2>
<p>A chemical reaction changes one or more substances into new substances. Signs of a reaction include a change in colour, release of gas, change in temperature and formation of a precipitate.</p>

<style>
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; color: #264de4; }
.title   { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0; }
.center  { text-align: center; }
.strike  { text-decoration: line-through; color: #9ca3af; }
.now     { color: #16a34a; font-weight: 700; }
.fancy-link { color: #264de4; text-decoration: underline wavy #f59e0b; text-underline-offset: 4px; }
.truncate { width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px dashed #ccc; }
</style>

<div class="center">
  <p class="eyebrow">Admissions open 2026–27</p>
  <p class="title">Crack JEE with Vidya Coaching</p>
  <p>Fee: <span class="strike">₹60,000</span> <span class="now">₹45,000</span></p>
  <a class="fancy-link" href="#">See batch timings</a>
</div>
<p class="truncate">Very long product name: Premium Dry Fruit Gift Hamper with Kaju, Badam and Pista</p>

<style>
.before { font: 13px/1.2 Arial, sans-serif; text-align: justify; }
.after  {
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 65ch;
  color: #1f2937;
}
.label { font: 700 12px system-ui; color: #b91c1c; margin-top: 10px; }
.label.ok { color: #15803d; }
</style>

<p class="label">BEFORE</p>
<p class="before">Photosynthesis is the process by which green plants make their own food using sunlight, carbon dioxide and water. Chlorophyll in the leaves absorbs sunlight. Oxygen is released as a by-product, which is why plants are essential for life on Earth.</p>
<p class="label ok">AFTER</p>
<p class="after">Photosynthesis is the process by which green plants make their own food using sunlight, carbon dioxide and water. Chlorophyll in the leaves absorbs sunlight. Oxygen is released as a by-product, which is why plants are essential for life on Earth.</p>