Tipografik shkala va o'qiluvchanlik: o'lcham, juftlik va qator uzunligi

Qisqacha: Tipografik shkala — shrift o'lchamlari tasodifiy emas, bitta nisbat bilan ko'payib boradi: asos 16 piksel va nisbat 1.25 bo'lsa — 16, 20, 25, 31.25. Kichik ekranda nisbat kichikroq 1.2-bob, kattasida kattaroq (1.25–1.333) — Utopia bu ikkisini clamp() bilan bog'laydi. Sahifada 1–2 shrift oilasi, 2–3 qalinlik yetadi. O'qiladigan matnning qatori 45–75 belgi bo'lsin. Narx va jadvallarda raqamlar teng enli (tabular-nums). O'zbek matni uchun shriftda oʻ, gʻ va kerak bo'lsa kirill ў қ ғ ҳ borligini tekshiring.

Bu darsda

• Modul shkala nima ekanini va nisbatlar (1.2, 1.25, 1.333) sahifa ohangini qanday o'zgartirishini tushuntirasiz.
• Shkalani Typescale va Utopia bilan hisoblab, --step-* tokenlariga bog'laysiz.
• Sarlavha va matn shriftini juftlaysiz, qalinlik ierarxiyasini qurasiz.
• Qator uzunligini ch bilan cheklaysiz va uni haqiqiy o'zbek matnida o'lchaysiz.
• Shriftning o'zbek harflarini qo'llashini tekshirasiz.

Oldin bilishingiz kerak: Qator balandligi va harf oralig'i, Fluid tipografiya va Utopia, Dizayn tokenlari, Rang nazariyasi.

1. Nega bu kerak?

Vizual ierarxiya darsida o'lcham ierarxiyaning birinchi vositasi ekanini ko'rdik. Endi savol: qaysi o'lchamlar?

Stajyorning «Bahor» blog sahifasida oltita o'lcham bor: 14, 15, 17, 19, 22 va 26 piksel. Har biri alohida "chiroyli" deb tanlangan. Natijada 15 va 17 ni ko'z ajratmaydi, 19 li sarlavha esa 17 li matndan zo'rg'a farq qiladi. Sahifa "biroz tartibsiz" — nega ekanini hech kim aytolmaydi.

<style>
  body { font-family: system-ui, sans-serif; line-height: 1.3; }
  .juft { display: flex; flex-wrap: wrap; gap: 2rem; }
  .juft div { width: 16rem; }
  .juft p { margin: 0 0 0.5rem; }
  .a p:nth-child(1) { font-size: 26px; }
  .a p:nth-child(2) { font-size: 22px; }
  .a p:nth-child(3) { font-size: 19px; }
  .a p:nth-child(4) { font-size: 17px; }
  .a p:nth-child(5) { font-size: 15px; }
  .b p:nth-child(1) { font-size: 31.25px; }
  .b p:nth-child(2) { font-size: 25px; }
  .b p:nth-child(3) { font-size: 20px; }
  .b p:nth-child(4) { font-size: 16px; }
  .b p:nth-child(5) { font-size: 12.8px; }
</style>
<div class="juft">
  <div class="a">
    <p>Osh sirlari</p><p>Guruch tanlash</p><p>Zirvak</p>
    <p>Matn: sabzini somon qilib to'g'rang.</p>
    <p>Izoh: retsept Rustam akadan.</p>
  </div>
  <div class="b">
    <p>Osh sirlari</p><p>Guruch tanlash</p><p>Zirvak</p>
    <p>Matn: sabzini somon qilib to'g'rang.</p>
    <p>Izoh: retsept Rustam akadan.</p>
  </div>
</div>

Nimaga qarang: chapdagi ustunda besh o'lcham "sirg'anib" tushadi — "Zirvak" (19) bilan matn (17) deyarli bir xil. O'ngdagi ustunda har pog'ona oldingisidan aniq bir xil marta kichik: 31.25, 25, 20, 16, 12.8. Har qator o'z darajasida — tartib ko'rinib turadi, garchi o'lchamlarning o'zi deyarli o'shanday.

O'ngdagi sonlarni kim tanladi? Hech kim. Ular bitta songa — 1.25 ga — ko'paytirib chiqdi.

2. Modul shkala

2.1 Ta'rif

Modul shkala (modular scale) — asos o'lchamdan boshlab har keyingi o'lcham oldingisini bir xil nisbatga ko'paytirib hosil bo'ladigan qator:

qadam 0:  16
qadam 1:  16 × 1.25     = 20
qadam 2:  16 × 1.25²    = 25
qadam 3:  16 × 1.25³    = 31.25
qadam −1: 16 ÷ 1.25     = 12.8

Fluid tipografiya darsida bu g'oyani "tip shkalasi" deb ko'rgan edik va "chuqurrog'i keyin" degandik. Musiqadagi o'xshatish shu yerdan: nisbatlarning nomlari musiqa intervallaridan olingan. Ikkita nota chastotalari 5:4 (ya'ni 1.25) nisbatda bo'lsa, quloqqa yoqimli "katta terts" eshitiladi. Tipografiyada ham qat'iy nisbatdagi o'lchamlar ko'zga "uyg'un" ko'rinadi.

2.2 Nisbatlar

Eng ko'p ishlatiladigan nisbatlar va 16 pikseldan boshlangan birinchi to'rt qadam (hisobladik):

Undan kattalari ham bor: 1.5 ("sof kvinta") va 1.618 ("oltin kesim"). Ular to'rtinchi qadamda 81 va 110 pikselga yetadi — telefonda bunday sarlavha sig'maydi. Ular faqat bitta ulkan sarlavhali plakatsimon sahifalar uchun.

Qoida:

• Kichik nisbat (1.125–1.2) — matnli, zich interfeys: admin panel, hujjat, ilova. O'lchamlar yaqin, ko'p daraja sig'adi.
• O'rta nisbat (1.25) — blog, do'kon, kontent saytlari.
• Katta nisbat (1.333 va undan) — landing, portfolio, reklama sahifasi: sarlavha "gapiradi".

2.3 Telefonda kichik, kompyuterda katta

Bitta nisbatning muammosi bor. 1.333 bilan 5-qadam — 67 piksel. Kompyuterda chiroyli, 360 piksellik telefonda esa sarlavhaning har so'zi alohida qatorda. Shuning uchun Utopia yondashuvi (Fluid tipografiya): ikkita shkala — kichik ekran uchun va katta ekran uchun — va ular orasida clamp().

«Bahor» shkalasi aynan shunday qurilgan (Dizayn tokenlari):

Shu darsning skripti bilan qayta hisobladik: beshala clamp() «Bahor» tokenlari bilan raqamma-raqam bir xil chiqdi. Endi ularning ortidagi qaror aniq: «Bahor» — kontent sayti, u "katta terts" gacha boradi, lekin telefonda "kichik terts" da qoladi.

3. Shkalani hisoblash vositalari

3.1 Typescale

Typescale (typescale.com) — shkalani ko'z bilan tanlash uchun bepul vosita. Asos o'lcham, nisbat va shriftni tanlaysiz — u h1 dan small gacha hamma darajani haqiqiy matn bilan ko'rsatadi va CSS'ni beradi. Nisbatni tanlashning eng tez yo'li: 1.2, 1.25, 1.333 ni navbatma-navbat bosib, qaysi biri loyihangiz ohangiga mos kelishini ko'rish.

Typescale bitta ekran uchun (rem da) chiqaradi. Fluid kerak bo'lsa — nisbatni tanlagach, Utopia'ga o'tasiz.

3.2 Utopia

Utopia tip kalkulyatori (utopia.fyi/type) ikkita shkala oladi: kichik ekran (en, asos, nisbat) va katta ekran. U har qadam uchun --step-N o'zgaruvchisini chiqaradi. Nomlar «Bahor» tokenlari bilan bir xil — shuning uchun kalkulyator natijasini tokenlar.css ga to'g'ridan-to'g'ri qo'yasiz (Dizayn tokenlari).

3.3 Qaysi qadam qaysi elementga?

Shkala — o'lchamlar ro'yxati. Qaysi element qaysi qadamni olishi — alohida qaror:

Qadam tashlab ketish mumkin: h1 — --step-4, h2 — --step-2. Shunda sarlavhalar orasidagi farq kuchliroq. Mumkin emasi — shkaladan tashqari son qo'shish.

Tekshirib ko'ring: Asos 16, nisbat 1.2. Dizayner h3 ni 21 piksel chizdi. Shkalaga mosmi? Eng yaqin qadam qaysi?

4. Shrift juftlash

4.1 1–2 oila

Shrift asoslari darsida "bir sahifada ko'pi bilan ikki shrift oilasi yetadi" degan edik — endi nega ekanini ko'ramiz. Har shrift o'z "ovozi" bilan keladi. Uchta shrift — uch kishi bir vaqtda gapirgandek. Bundan tashqari har yangi shrift fayli sahifani sekinlashtiradi (Web shriftlar).

Uch keng tarqalgan yo'l:

1. Bitta oila, har xil qalinlik. Eng xavfsiz. Tizim shrifti (system-ui) yoki bitta variable shrift (Variable shriftlar). Ierarxiyani o'lcham va qalinlik beradi.
2. Kontrastli juftlik. Sarlavha — serifli (Lora, Georgia), matn — serifsiz (tizim shrifti). Yoki teskarisi. «Bahor» shunday: Lora + system-ui. Farq aniq, "bahslashish" yo'q.
3. Bitta oila ichidagi juftlik (superfamily). Bir dizayner chizgan serifli va serifsiz variantlar (masalan, "Source Serif" va "Source Sans"). Ular ichki proporsiyalari bir xil bo'lgani uchun oson moslashadi.

Qochish kerak bo'lgan holat — o'xshash, lekin bir xil bo'lmagan ikki shrift: ikkita serifsiz, ikkalasi ham oddiy. Ko'z farqni sezadi, lekin nima uchun farq borligini tushunmaydi — xato bilan ikki shrift qo'yilgandek.

4.2 Juftlikni ko'z bilan tekshirish

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora:wght@600">
<style>
  body { font-family: system-ui, sans-serif; background: #fffaf0; }
  .taom-karta {
    max-width: 22rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background: white;
    color: #1f2a24;
  }
  .taom-karta h3 {
    margin: 0 0 0.25rem;
    font-family: Lora, serif;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    color: #2f6b3a;
  }
  .taom-karta p { margin: 0; line-height: 1.5; }
</style>
<article class="taom-karta">
  <h3>Samarqand oshi: qatlama usulida</h3>
  <p>Guruch go'sht ustiga qatlam qilib solinadi va aralashtirilmaydi.
    Sabzi somon qilib to'g'raladi.</p>
</article>

Nimaga qarang: sarlavha Lora'da — serifli, yumaloq, "retsept kitobi" ohangida. Matn tizim shriftida — toza, telefon ekranida tanish. Ikkalasi aniq har xil, lekin bir-biriga xalaqit bermaydi: sarlavha qisqa va katta, matn uzun va oddiy. Lora natijada Google Fonts'dan; «Bahor»ning o'zida u o'z serveridan yuklanadi (Web shriftlar).

4.3 X-balandlik

Juftlikda bitta texnik narsa muhim: x-balandlik (x-height) — kichik harflarning (masalan, x) bo'yi. Bir xil font-size dagi ikki shrift har xil katta ko'rinishi mumkin, chunki x-balandligi farq qiladi. Juftlangan shriftlarning x-balandligi yaqin bo'lsa, ular bir qatorda yonma-yon kelganda (masalan, sarlavha ichida kod) "sakrab" turmaydi. Web shriftlar darsidagi zaxira shrift metrikalari va font-size-adjust aynan shu muammoni hal qiladi.

5. Qalinlik ierarxiyasi

Qalinlik (font-weight) ham shkala: 100 dan 900 gacha. Lekin ko'p qalinlik — ko'p shovqin. Amalda 2–3 ta yetadi:

Ikki qo'shni qalinlik orasidagi farq kamida 200 bo'lsin: 400 va 500 ni ko'z zo'rg'a ajratadi (Vizual ierarxiya darsidagi CRAP kontrasti). Katta o'lchamdagi sarlavha kichikroq qalinlik bilan ham kuchli ko'rinadi — katta sarlavhaga 600, kichigiga 700 berish odatiy hol.

Variable shriftda istalgan qiymat mumkin (masalan, portfolio h1 iga 750). Lekin bu tanlovni oshirmaydi: tizimdagi qalinliklar ro'yxati baribir qisqa bo'lsin.

Diqqat: Shrift faylida yo'q qalinlikni so'rasangiz, brauzer uni "soxta" qalinlashtiradi (faux bold) — harflar surkalgandek chiqadi. Portfolio'dagi font-synthesis: none (Web shriftlar) shuni to'xtatadi. Faqat yuklangan qalinliklarni ishlating.

6. O'qiluvchanlik

6.1 Qator uzunligi

Uzun qatorni ko'z oxirigacha kuzatib borib, keyingi qatorning boshini topishda adashadi. Qisqa qatorda esa ko'z juda tez-tez "sakraydi". Robert Bringhurst "The Elements of Typographic Style" kitobida bitta ustunli matn uchun 45–75 belgi qulay oraliq ekanini, 66 belgi esa idealga yaqin ekanini yozadi. WCAG'ning AAA darajadagi 1.4.8 mezoni ham qator 80 belgidan oshmasligini talab qiladi.

CSS'da bu ch bilan qilinadi (O'lcham birliklari): max-inline-size: 65ch. Lekin ch — nol raqamining eni, o'rtacha harfning emas. Biz Chrome'da (Windows, Segoe UI, 16 piksel) «Bahor» haqidagi o'zbekcha matnni o'lchadik:

Ya'ni o'zbek matnida 65ch aslida 75 belgidan oshib ketadi: lotin harflarimizning ko'pi (i, l, r, t, apostrof) noldan tor. 45–75 oralig'ida qolish uchun bu shriftda 55–60ch yaxshiroq. Boshqa shriftda natija boshqacha bo'ladi — o'z shriftingizda o'lchang.

<style>
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #1f2a24;
  }
  p { margin: 0 0 1.5rem; }
  .cheklangan { max-inline-size: 60ch; }
</style>
<p>Choyxona «Bahor» Toshkentda ochilgan. Bu yerda har kuni ertalab
  yettidan kechki o'n birgacha issiq osh, lag'mon va manti
  tayyorlanadi.
  Jasur aka mehmonlarni o'zi kutib oladi, Rustam aka esa oshni faqat
  o'tin olovida damlaydi.</p>
<p class="cheklangan">Choyxona «Bahor» Toshkentda ochilgan. Bu yerda
  har kuni ertalab yettidan kechki o'n birgacha issiq osh, lag'mon va
  manti tayyorlanadi. Jasur aka mehmonlarni o'zi kutib oladi, Rustam
  aka esa oshni faqat o'tin olovida damlaydi.</p>

Nimaga qarang: birinchi paragraf natija oynasining butun eniga yoyilgan — kompyuterda qatorlari 100 belgidan uzun, ko'z keyingi qator boshini qidiradi. Ikkinchisi 60ch da to'xtaydi va to'rt qatorga bo'linadi. Telefon tugmasini bosing: 360 pikselda ikkalasi ham bir xil — tor ekranda cheklov o'z-o'zidan bajariladi.

6.2 Qator balandligi va o'lcham

Qator balandligi darsidagi qoida shkala bilan bog'lanadi: o'lcham oshgan sari line-height kamayadi. Matn uchun 1.5, sarlavha uchun 1.1–1.25. 40 piksellik sarlavhaga 1.5 bersangiz, ikki qatori orasida 20 piksel "teshik" paydo bo'ladi va sarlavha ikki alohida gapdek o'qiladi. «Bahor» tokenlari: --qator-matn: 1.5, --qator-sarlavha: 1.2.

Qator uzunligi ham bog'liq: uzunroq qatorga sal kattaroq line-height kerak — ko'z qaytishda adashmasin.

6.3 Raqamlar: tabular-nums

Ko'p shriftlarda raqamlar proporsional: 1 tor, 0 keng. Matn ichida chiroyli, lekin ustunda — narxlar ro'yxatida, jadvalda — raqamlar bir-birining ostiga tushmaydi. font-variant-numeric: tabular-nums hamma raqamni bir xil enli qiladi (Variable shriftlar va OpenType).

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Lora">
<style>
  body { font-family: Lora, serif; }
  .juft { display: flex; flex-wrap: wrap; gap: 2rem; }
  ul {
    width: 11rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.25rem;
  }
  li { display: flex; justify-content: space-between; }
  .narx { color: #b4461a; }
  .tabular .narx { font-variant-numeric: tabular-nums; }
</style>
<div class="juft">
  <ul aria-label="Proporsional">
    <li>Osh <span class="narx">11 111</span></li>
    <li>Manti <span class="narx">30 000</span></li>
    <li>Choy <span class="narx">5 000</span></li>
  </ul>
  <ul class="tabular" aria-label="Tabular">
    <li>Osh <span class="narx">11 111</span></li>
    <li>Manti <span class="narx">30 000</span></li>
    <li>Choy <span class="narx">5 000</span></li>
  </ul>
</div>

Nimaga qarang: ikkala ro'yxat Lora shriftida. Chapda "11 111" "30 000" dan sezilarli tor — birliklar noldan ingichka, xonalar bir-birining ostiga tushmaydi. O'ngda har raqam bir xil joy egallaydi. Chrome'da 40 pikselda o'lchadik: Lora'da "11111" — 73, "00000" — 124 piksel; tabular-nums bilan ikkalasi 130. "11 111" — ataylab tanlangan namuna: 1 eng tor raqam.

Tizim shriftida esa farq bo'lmasligi mumkin: Windows'dagi Segoe UI'da raqamlar sukut bo'yicha teng enli (o'lchadik: ikkalasi 108). Lekin system-ui har qurilmada boshqa shrift — qoidani baribir yozing. «Bahor»da .narx va td ga tabular-nums Variable shriftlar darsidan beri berilgan.

Tekshirib ko'ring: «Bahor» blogida maqola ustuni kompyuterda 900 piksel, matn 16 piksel. Mehmonlar "o'qish charchatadi" deyapti. Nima qilasiz va nega 65ch emas?

7. O'zbek matni uchun shrift

7.1 Qaysi belgilar kerak

O'zbek lotin alifbosining rasmiy yozuvida oʻ va gʻ dagi belgi — ʻ (Unicode U+02BB), tutuq belgisi esa ʼ (U+02BC). Amalda ko'p matn oddiy apostrof ' bilan yoziladi — kursimiz ham shunday. Lekin sayt mazmunini boshqalar yozadi: mijoz rasmiy belgilar bilan matn yuborishi mumkin. Kirill yozuvidagi matn uchun esa ў, қ, ғ, ҳ kerak.

Shriftda belgi bo'lmasa, brauzer uni boshqa shriftdan oladi (fallback). So'z o'rtasida bitta harf boshqa shriftda — "yamoq" kabi ko'rinadi.

7.2 Tekshirdik: Lora va Rubik

«Bahor» sarlavhasi Lora'da, portfolio namunasi — Rubik'da. Google Fonts'dagi fayllarni (2026-yil sentabr holati) fontkit kutubxonasi bilan ochib, belgilarni tekshirdik:

Qiziq tomoni: Google Fonts'ning CSS'i Rubik'ning lotin faylida U+02BB bor deb e'lon qiladi (unicode-range), lekin faylning o'zida bu belgi yo'q. Chrome'da tekshirdik (DevTools'dagi Rendered Fonts ma'lumoti): Oʻzbekiston so'zidagi ʻ Rubik emas, Times New Roman bilan chizildi.

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Rubik&family=Lora">
<style>
  p { margin: 0 0 0.5rem; font-size: 2rem; }
  .rubik { font-family: Rubik, sans-serif; }
  .lora { font-family: Lora, serif; }
</style>
<p class="rubik">Oʻzbekiston — ҳаво</p>
<p class="lora">Oʻzbekiston — ҳаво</p>

Nimaga qarang: birinchi qatorda — Rubik — ʻ va ҳ boshqa shriftdan kelgan: ҳ serifli va boshqa harflardan ajralib turadi. Ikkinchi qatorda — Lora — hamma belgi bitta shriftda. Farq kichik, lekin sarlavhada — eng ko'p ko'rinadigan joyda — sezilarli.

Tekshirish tartibi:

1. Google Fonts'da shrift sahifasida "Type here to preview text" maydoniga yozing: Oʻzbekiston gʻalla ʼ Ўзбекистон қишлоқ ғалла ҳаво.
2. DevTools → Elements → Computed panelining pastidagi Rendered Fonts bo'limi: element qaysi shrift(lar) bilan chizilganini va har biri nechta belgi berganini ko'rsatadi. Ikkinchi shrift ko'rinsa — yamoq bor.
3. Faqat kerakli qism (subset) fayllarini yuklang. «Bahor»ning bahor.woff2 fayli — Fontsource'ning lotin qismi (Web shriftlar): unda ʻ bor, kirill harflari esa yo'q. Kirill matni kerak bo'lsa — alohida cyrillic-ext fayli va unicode-range.

Tekshirib ko'ring: Portfolio'ngiz Rubik'da, lekin matningiz oddiy apostrof bilan (O'zbekiston). Rubik'ning ʻ yo'qligi sizga ta'sir qiladimi?

8. Ko'p uchraydigan xatolar

8.1 Shkaladan tashqari o'lcham

font-size: 21px — shkalada yo'q. Tuzatish: eng yaqin --step-*; ataylab bo'lsa — dizayner bilan shkala nisbatini qayta ko'ring.

8.2 Juda katta nisbat telefonda

1.5 nisbat bilan h1 54 piksel — 360 pikselda bitta so'z bir qatorda. Tuzatish: telefon uchun kichikroq nisbat, fluid clamp(), va Fluid tipografiya darsidagi 2.5 barobar qoidasi (eng katta o'lcham eng kichigidan 2.5 barobardan oshmasin — aks holda brauzerda 200% kattalashtirish to'liq ishlamaydi).

8.3 Uchta va undan ortiq shrift

Sarlavha, matn, tugma va footer — to'rt xil shrift. Tuzatish: 1–2 oila, qolgan farqni qalinlik va o'lcham beradi.

8.4 Qator juda uzun

Matn butun ekran enida — kompyuterda 120 belgi. Tuzatish: max-inline-size — shriftingizda o'lchab tanlangan ch qiymati (o'zbek matnida 60ch atrofida).

8.5 Katta sarlavhada line-height: 1.5

Tuzatish: sarlavha — 1.1–1.25, --qator-sarlavha.

8.6 Belgilarni tekshirmaslik

Sarlavhada oʻ boshqa shriftdan kelmoqda. Tuzatish: Rendered Fonts'da tekshiring; kerakli qismi bor shrift tanlang yoki matnni oddiy apostrof bilan yozing.

9. Mashqlar

1-mashq (oson): shkalani hisoblang

Asos 18 piksel, nisbat 1.2. Qadamlar −1, 0, 1, 2, 3 ni hisoblang (bir xonagacha yaxlitlang) va rem ga o'tkazing.

Ishora: har qadam — oldingisi × 1.2; −1 qadam — asos ÷ 1.2. rem — pikselni 16 ga bo'lish.

2-mashq (o'rta): menyu jadvali

«Bahor» menyu jadvali (Ro'yxatlar va jadvallar stili) uchun tipografiyani yozing:

1. Jadval sarlavhasi (caption) — --step-1, 600 qalinlik, sarlavha shrifti.
2. Ustun sarlavhalari (th) — --step--1, 600, bosh harflar bilan (text-transform), harf oralig'i biroz kengroq.
3. Narxlar ustuni — o'ngga tekislangan, tabular-nums.

Ishora: Matn bezagi darsida bosh harfli qisqa matnga letter-spacing qo'shilishini ko'rgan edik.

.jadval-orami caption {
  font-family: var(--shrift-sarlavha);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--qator-sarlavha);
  text-align: start;
}

.jadval-orami th {
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.jadval-orami td:last-child {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

3-mashq (qiyin): ikki shkalani tanlang

«Bahor» uchun alohida "Aksiya" landing sahifasi kerak: bitta katta shior, qisqa matn va tugma. Jasur aka "ko'zga tashlansin" dedi.

1. Qaysi nisbatni tanlaysiz — kichik ekran va katta ekran uchun alohida?
2. 16 → 18 asos bilan --step-4 (shior) ni 360 va 1280 da hisoblang.
3. 2.5 barobar qoidasiga tekshiring.

Ishora: landing uchun katta nisbat mos ("Nisbatlar" bo'limi). Telefonda esa shior bir-ikki so'zdan iborat bo'lsa ham 360 pikselga sig'sin. 2.5 barobar qoidasi: kompyuterdagi o'lcham telefondagidan 2.5 barobardan katta bo'lmasin (Fluid tipografiya).

qiyalik      = (56.83 − 39.06) ÷ 920 = 0.019315  →  1.9315vw
boshlang'ich = 39.06 − 360 × 0.019315 = 32.11px  →  2.0068rem

:root {
  --step-4: clamp(2.4414rem, 2.0068rem + 1.9315vw, 3.552rem);
}

4-mashq: Portfolio qadami — portfolio shkalasini tartibga keltirish

Portfolio o'lchamlari Fluid tipografiya darsida alohida-alohida tanlangan edi: matn 16 → 18, h2 22 → 24, h1 28 → 40.

1. Qo'shni o'lchamlar nisbatini hisoblang — 360 va 1280 pikselda. Ular bitta shkalaga tushadimi?
2. Portfolio uchun shkala tanlang: telefonda 16 × 1.2, kompyuterda 18 × 1.333 (portfolio — o'zingizni ko'rsatadigan sahifa, sarlavha "gapirsin"). --step--1 … --step-3 ni hisoblang.
3. h1 — --step-3, h2 — --step-2. asos.css ni yangilang.
4. Asosiy matn ustunida qatorlar necha belgi? 70ch ustunda o'zbek matni uchun nima qilasiz?

Ishora: Utopia formulasi — Fluid tipografiya darsidagi besh qadam. Qator uzunligi — "Qator uzunligi" bo'limidagi jadval. main ning o'zini toraytirmang — unda to'r va kartalar bor.

:root {
  /* Tip shkalasi: 360 da 16 × 1.2, 1280 da 18 × 1.333 */
  --step--1: clamp(0.8333rem, 0.8292rem + 0.0185vw, 0.844rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.0828rem + 0.5211vw, 1.4996rem);
  --step-2: clamp(1.44rem, 1.2213rem + 0.9722vw, 1.999rem);
  --step-3: clamp(1.728rem, 1.3615rem + 1.629vw, 2.6647rem);
}

h1 {
  font-size: var(--step-3);
}

h2 {
  font-size: var(--step-2);
}

/* O'zbek matnida 60ch ≈ 65–73 belgi (Tipografik shkala darsi) */
main > p,
main li,
main dd {
  max-inline-size: 60ch;
}

10. Real ishda

• Dizayn tizimlari tip shkalasini token sifatida beradi: Material Design'da "Display", "Headline", "Title", "Body", "Label" rollari, har biri o'z o'lchami va qalinligi bilan. Tailwind'da text-sm, text-base, text-xl — ham shkala.
• Figma'da dizayner "Text styles" yaratadi — har uslub shkaladagi bitta qadam. Dasturchi ularni --step-* ga moslaydi (Figma dasturchi uchun 1).
• Mahalliy loyihalar — davlat xizmatlari, yangiliklar saytlari — ko'pincha ikki yozuvda (lotin va kirill) ishlaydi. Shrift tanlashda ў қ ғ ҳ tekshiruvi majburiy qadam.
• Intervyuda so'raladi: "Modul shkala nima?", "ch birligi nimani o'lchaydi?", "tabular-nums qachon kerak?", "Shriftda harf yo'q bo'lsa nima bo'ladi?".

Xulosa

• Modul shkala — asos × nisbat^qadam; 1.2 zich interfeys, 1.25 kontent, 1.333 va undan — landing.
• Fluid shkala: telefonda kichik nisbat, kompyuterda katta; Utopia --step-* tokenlarini chiqaradi.
• 1–2 shrift oilasi, 2–3 qalinlik (farq ≥ 200); kontrastli juftlik yoki bitta oila.
• Qator 45–75 belgi; ch — nolning eni, o'zbek matnida 60ch ≈ 65–73 belgi; o'lchab tanlang.
• Raqamli ustunlarda tabular-nums; sarlavhada line-height 1.1–1.25.
• O'zbek matni uchun ʻ ʼ ў қ ғ ҳ belgilarini tekshiring — DevTools'dagi Rendered Fonts.

Keyingi dars: UI/UX asoslari: holatlar, qonunlar va foydalanish qulayligi — har komponentning hover, fokus, xato va bo'sh holatlarini, Fitts va Hick qonunlarini o'rganamiz.

Manbalar

• Robert Bringhurst: "The Elements of Typographic Style" — qator uzunligi (45–75 belgi)
• W3C: "Understanding SC 1.4.8: Visual Presentation" — w3.org/WAI/WCAG22/Understanding
• Typescale — typescale.com; Utopia: "Fluid type scale calculator" — utopia.fyi/type
• MDN: "font-variant-numeric", "ch unit", "font-synthesis" — developer.mozilla.org
• Google Fonts: Lora, Rubik; fontkit — github.com/foliojs/fontkit
• Chrome DevTools: "Computed tab — Rendered Fonts" — developer.chrome.com/docs/devtools