Typography — Farta iyo Qoraalka

Far-shaxanka (Typography) waa mid ka mid ah tiirarka ugu muhiimsan naqshadaynta mareegaha internetka [1]. Qoraalka si fiican loo qaabeeyay waa mid si dhib yar loo akhrin karo, muuqaal ahaanna aad u soo jiidasho leh.

Sifada `font-family` — Nooca Farta

body {
  font-family: 'Inter', sans-serif;
}

h1 {
  font-family: 'Georgia', serif;
}

code {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

Noocyada Farta (Font Families)

Nooca Farta	Tusaale	Isticmaalka Guud
`serif`	Georgia, Times	Cinwaannada, maqaallada dhaadheer, iyo buugaagta
`sans-serif`	Inter, Arial	Interface-ka (UI) iyo qoraalka guud ee bogga
`monospace`	JetBrains Mono	Qorista koodhka barnaamijyada
`cursive`	Brush Script	Qoraallada gacanta ama qurxinta
`fantasy`	Impact	Cinwaannada waaweyn ee hal-abuurka ah

Google Fonts — Isticmaalka Farta Bilaashka Ah

Ku dar koodkan qaybta <head> ee boggaaga:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Lora:ital@1&display=swap" rel="stylesheet">

Ka dib, u adeegso CSS-ta sidan:

body { font-family: 'Inter', sans-serif; }
h1   { font-family: 'Lora', serif; font-style: italic; }

Is-beddelka Farta ee Gurmadka ah (Font Stack)

Ku dar faro gurmad ah (fallback fonts) si loo isticmaalo haddii farta koowaad ee aad dooratay laga waayo kombiyuutarka akhristaha:

body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

Sifada `font-size` — Cabbirka Farta

Unugyada Cabbirka (Font Units)

/* px (Pixels) — Waa cabbir go'an (fixed), aadna u saxan */
p { font-size: 16px; }

/* rem — Waa cabbir la xiriira xididka bogga (html) — waana kan ugu fiican helitaanka (accessibility) */
p   { font-size: 1rem;   }   /* = 16px (caadiga ah) */
h1  { font-size: 2.5rem; }   /* = 40px */
h2  { font-size: 2rem;   }   /* = 32px */
h3  { font-size: 1.5rem; }   /* = 24px */

/* em — Waa cabbir la xiriira curiyaha sare (parent element) */
.weelka  { font-size: 20px; }
.weelka p { font-size: 0.9em; } /* = 18px (0.9 × 20) */

/* Boqolkiiba (%) */
p { font-size: 112.5%; } /* = 18px (112.5% × 16) */

/* Ballaca shaashadda (Viewport Width - vw) */
h1 { font-size: 5vw; } /* 5% oo ah ballaca shaashadda */

/* Clamp — wuxuu farta ku dhex koobaa cabbirada ugu yar iyo ugu weyn ee loo cayimay */
h1 { font-size: clamp(1.5rem, 5vw, 3.5rem); }

Sifada `font-weight` — Dhumucda iyo Culeyska Farta

p          { font-weight: 400; }   /* Caadi — normal */
.xidid     { font-weight: 600; }   /* Semi-bold */
h1         { font-weight: 700; }   /* Bold */
.aad-xidid { font-weight: 800; }   /* Extra bold */

/* Magacyada u dhigma dhumucda */
p    { font-weight: normal; }   /* = 400 */
strong { font-weight: bold; }   /* = 700 */

Sifada `font-style` — Qaabka Farta

em     { font-style: italic;  }   /* Qoraal qallocan (Italic) */
cite   { font-style: italic;  }
.caadi { font-style: normal;  }   /* Qoraal caadi ah */

Sifada `line-height` — Masaafada Khadadka Qoraalka

/* Tiro keli ah (Number) — Waa habka ugu fiican, maadaama ay farta u weheliso si isu-dhiganta: */
p { line-height: 1.6; }   /* 1.6 × font-size */
h1 { line-height: 1.1; }  /* Cinwaannada (Masaafad yar) */

/* px */
p { line-height: 28px; }

/* Qiimayaasha lagu taliyo: */
/* 1.4–1.7 — Qoraalka guud ee bogga */
/* 1.1–1.3 — Cinwaannada waaweyn */

Sifooyinka Kala-fogaanshaha

Sifada `letter-spacing` — Kala-fogaanshaha Xarfaha

h1    { letter-spacing: -0.03em; }  /* Cinwaannada — si xarfuhu isugu dhowaadaan */
.kor  { letter-spacing: 0.15em;  }  /* Qoraallada waaweyn ee dul-saaran (Caps Overlays) */
p     { letter-spacing: 0;       }  /* Qoraalka guud — caadi */

Sifada `word-spacing` — Kala-fogaanshaha Erayada

p { word-spacing: 0.05em; }

Sifada `text-align` — Horeynta iyo Dhinac-u-reedka Qoraalka

h1 { text-align: center; }   /* Dhexda */
p  { text-align: left;   }   /* Bidix (Caadiga ah) */
.midig { text-align: right;  }   /* Midig */
.fidi  { text-align: justify; }  /* Si siman labada dhinac u fidsan */

Sifada `text-decoration` — Qurxinta Qoraalka

a           { text-decoration: none;      }   /* In meesha laga saaro xariiqda hoose */
a:hover     { text-decoration: underline; }   /* Hoos-ka-xariiq */
.laab       { text-decoration: line-through; } /* Xariiq dhex-marta (Strikethrough) */
.kor-xariiq { text-decoration: overline;  }   /* Koor-ka-xariiq */

/* Qaabaynta xariiq qurxoon: */
a {
  text-decoration: underline;
  text-decoration-color: #00d97e;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

Sifada `text-transform` — Beddelka Nooca Xarfaha

h1  { text-transform: uppercase; }   /* DHAMMAAN XARFO WAAWEYN */
nav { text-transform: capitalize; }  /* Xarafka Ugu Horreeya Oo Weyn */
.hoose { text-transform: lowercase; }/* dhammaan xarfo yaryar */
p   { text-transform: none; }        /* Caadi */

Sifada `text-shadow` — Hadhka Qoraalka

/* text-shadow: dhererka-x dhererka-y cufnaanta-dhibcaha midabka */
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Iftiin daciif ah (Glow effect) */
.glow {
  color: white;
  text-shadow: 0 0 20px rgba(0,217,126,0.8);
}

/* Hadhyaal badan oo is-dul-saaran */
.hadhka-badan {
  text-shadow:
    1px 1px 0 #00d97e,
    2px 2px 0 #00a860,
    3px 3px 0 #007a42;
}

Sifada `white-space` — Maaraynta Meelaha Bannaan

/* nowrap — Waxay diidaysaa in qoraalku u laabmo sadar cusub */
.hadal-gaaban { white-space: nowrap; overflow: hidden; }

/* pre — Wuxuu u soo bandhigaa qoraalka sida saxda ah ee loo qoray */
code { white-space: pre; }

/* pre-wrap — Wuxuu ilaaliyaa meelaha bannaan laakiin wuu laabaa qoraalka */
.nuxurka { white-space: pre-wrap; }

Sifada `text-overflow` — Maaraynta Qoraalka Dheer

.hadal-gaaban {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* Wuxuu dhamaadka ku darayaa "..." */
  max-width: 200px;
}

Habka Ugu Habboon ee Loo Habbeeyo Typography-ga

/* Xeerarka aasaasiga ah — ku habboon dhammaan mashaariicda: */
:root {
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { font-size: 16px; }  /* Aasaaska cabbirka rem */

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 600; }

p  { margin-bottom: 1.2rem; }

a {
  color: #00a860;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,168,96,0.4);
}
a:hover { text-decoration-color: #00a860; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(0,0,0,0.06);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

strong { font-weight: 700; color: #0a0a0a; }
em     { font-style: italic; }

Tusaale Maqaal Dhamaystiran

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Typography</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Lora:ital@1&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif;
      background: #f9f7f4;
      color: #333;
      line-height: 1.7;
    }
    .maqaal {
      max-width: 680px;
      margin: 60px auto;
      padding: 0 24px;
    }
    .kor-qoraal {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #00a860;
      margin-bottom: 12px;
    }
    h1 {
      font-family: 'Lora', serif;
      font-style: italic;
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: #0a0a0a;
      margin-bottom: 20px;
    }
    .sharaxaad {
      font-size: 1.15rem;
      color: #555;
      line-height: 1.75;
      margin-bottom: 32px;
      padding-bottom: 32px;
      border-bottom: 1px solid #eee;
    }
    p {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: #3a3a3a;
      margin-bottom: 1.4rem;
    }
    p::first-letter {
      font-size: 3.5rem;
      font-family: 'Lora', serif;
      font-weight: 400;
      float: left;
      line-height: 0.85;
      margin-right: 8px;
      margin-top: 6px;
      color: #00d97e;
    }
    blockquote {
      border-left: 3px solid #00d97e;
      margin: 2rem 0;
      padding: 1rem 1.5rem;
      background: rgba(0,217,126,0.04);
      border-radius: 0 10px 10px 0;
      font-style: italic;
      color: #555;
    }
    code { font-family: monospace; font-size: 0.875em; background: rgba(0,0,0,0.06); padding: 0.15em 0.4em; border-radius: 4px; }
  </style>
</head>
<body>
  <article class="maqaal">
    <p class="kor-qoraal">CSS · Typography</p>
    <h1>Farta Wanaagsani Waa Nuxurka Wanaagsan</h1>
    <p class="sharaxaad">
      Far-shaxanka (Typography) waa mid ka mid ah tiirarka ugu muhiimsan naqshadaynta mareegaha internetka — wuxuu xukumaa sida akhristayaashu u akhriyaan, u fahmaan, ugana dareemaan raaxo qoraalkaaga.
    </p>
    <p>
      Baro CSS Typography — font, size, weight, line-height, iyo spacing — si aad u dhisto mareeg qurux badan oo akhriskeedu aad u fudud yahay.
    </p>
    <blockquote>
      "Typography waa farshaxanka inaad mid aan la arkin ka dhigto mid la dareemo."<br>
      — Naqshadeeye aan la garanayn
    </blockquote>
    <p>
      Isticmaal qaabka <code>clamp()</code> ee cinwaannada si ay si dhib yar ula jaanqaadaan dhammaan cabbirada shaashadaha kala duwan.
    </p>
  </article>
</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Box Model — margin, padding, border, iyo sida walxuhu meel ugu qaataan.

Sifada font-family — Nooca Farta

Noocyada Farta (Font Families)

Google Fonts — Isticmaalka Farta Bilaashka Ah

Is-beddelka Farta ee Gurmadka ah (Font Stack)

Sifada font-size — Cabbirka Farta

Unugyada Cabbirka (Font Units)

Sifada font-weight — Dhumucda iyo Culeyska Farta

Sifada font-style — Qaabka Farta

Sifada line-height — Masaafada Khadadka Qoraalka

Sifooyinka Kala-fogaanshaha

Sifada letter-spacing — Kala-fogaanshaha Xarfaha

Sifada word-spacing — Kala-fogaanshaha Erayada

Sifada text-align — Horeynta iyo Dhinac-u-reedka Qoraalka

Sifada text-decoration — Qurxinta Qoraalka

Sifada text-transform — Beddelka Nooca Xarfaha

Sifada text-shadow — Hadhka Qoraalka

Sifada white-space — Maaraynta Meelaha Bannaan

Sifada text-overflow — Maaraynta Qoraalka Dheer