Fluid tipografiya: clamp() formulasi, masofalar va Utopia

Qisqacha: Fluid tipografiya — shrift va bo'sh joy ekran eni bilan silliq o'sadi, breakpointdagi "sakrash"siz. Formula ikki nuqtadan chiqadi: masalan, 360 piksellik ekranda 16px, 1280 da 18px. Qiyalik = (18 − 16) ÷ (1280 − 360), vw qismi = qiyalik × 100, boshlang'ich qism = 16 − 360 × qiyalik. Natija: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem). Ideal qiymatda rem bo'lishi shart — zoom'da matn kattalashsin. Eng katta o'lcham eng kichigidan 2.5 barobardan oshmasin. Utopia.fyi bu hisobni butun shkala uchun qiladi.

Bu darsda

• Ikki nuqtadan clamp() formulasini qo'lda, qadamma-qadam chiqarasiz.
• Formula har ekranda qanday qiymat berishini hisoblab tekshirasiz.
• Nega ideal qiymatda rem + vw kerakligini va "2.5 barobar" qoidasini zoom o'lchovlari bilan tushuntirasiz.
• Masofalarni (gap, padding) ham fluid qilasiz.
• Tip shkalasi nima ekanini va Utopia.fyi nima chiqarishini bilasiz.

Oldin bilishingiz kerak: Matematik funksiyalar, Mobile-first, Viewport birliklari, O'lcham birliklari.

1. Nega bu kerak?

O'tgan darsda portfolio'ga shunday qoida yozdik: body shrifti 64rem gacha 16 piksel, undan keyin 18. Natija — sakrash. 1023 piksellik oynada matn 16, 1024 da birdan 18. Oyna chetini sudrab ko'rsangiz, matn "chayqaladi". 1023 piksellik ekranda 16 piksel ham kichikroq tuyuladi — 1024 dan bitta piksel farq qilsa ham.

Liftni eslang. Zinapoya bilan qavatlarga sakrab chiqasiz, lift esa silliq ko'tariladi. Breakpoint — zinapoya: har zinada sakrash. Fluid tipografiya (fluid typography) — lift: shrift ekran eni bilan birga, har pikselda ozgina o'sadi.

Quroli tanish — Matematik funksiyalar darsidagi clamp(). O'sha yerda clamp(1.75rem, 1rem + 3vw, 3rem) ni yozib, qiymatlarini hisoblagan edik. Lekin 1rem + 3vw qayerdan olingan? Taxmin bilan. O'sha darsda "chegaralar va ideal qiymatni aniq hisoblash formulasini keyinroq o'rganamiz" degan edik. Bugun shu formulani chiqaramiz.

2. Formula: ikki nuqta orasidagi chiziq

2.1 Vazifa ikki nuqta bilan beriladi

Dizayner shunday deydi: "Telefonda (360 piksel) matn 16 piksel bo'lsin, kompyuterda (1280 piksel) — 18. Oradagi ekranlarda — tekis o'sib borsin."

Bu — ikki nuqta:

"Tekis o'sib borsin" — ular orasida to'g'ri chiziq. Bunday hisobni chiziqli interpolatsiya (linear interpolation) deyishadi: ikki ma'lum nuqta orasidagi qiymatni to'g'ri chiziq bo'yicha topish. Taksi narxi kabi: har kilometrga bir xil pul qo'shiladi.

Formula besh qadamda chiqadi. Avval yo'lni ko'rib oling, keyin har qadamni birma-bir yuramiz:

flowchart TD
  N["Ikki nuqta:<br/>360 → 16px, 1280 → 18px"] --> Q["1. Qiyalik"]
  Q --> V["2. vw qismi = qiyalik × 100"]
  V --> B["3. Boshlang'ich qism, rem da"]
  B --> C["4. clamp() ga yig'ish"]
  C --> T["5. Har enda tekshirish"]

2.2 1-qadam: qiyalik

Qiyalik (slope) — ekran 1 pikselga kengayganda shrift qanchaga o'sadi:

qiyalik = (katta shrift − kichik shrift) ÷ (katta ekran − kichik ekran)
        = (18 − 16) ÷ (1280 − 360)
        = 2 ÷ 920
        = 0.0021739

Ya'ni ekran har 1 pikselga kengayganda shrift 0.0021739 pikselga o'sadi. 920 piksel kengaysa — roppa-rosa 2 piksel.

2.3 2-qadam: vw qismi

1vw — ekranning 1 foizi, ya'ni ekran eni ÷ 100 (Viewport birliklari). Bizga "ekran eni × qiyalik" kerak. Buni vw da yozish uchun qiyalikni 100 ga ko'paytiramiz:

vw qismi = qiyalik × 100 = 0.0021739 × 100 = 0.2174vw

Tekshiruv: 1280 pikselda 0.2174vw = 1280 × 0.2174 ÷ 100 = 2.78 piksel.

2.4 3-qadam: boshlang'ich qism

Chiziq faqat vw dan iborat bo'lsa, 0 pikselda 0 bo'lardi. Bizniki esa 360 pikselda 16 bo'lishi kerak. Farqni doimiy qism to'ldiradi:

boshlang'ich = kichik shrift − kichik ekran × qiyalik
             = 16 − 360 × 0.0021739
             = 16 − 0.7826
             = 15.2174px

rem ga o'giramiz (16 ga bo'lamiz): 15.2174 ÷ 16 = 0.9511rem.

2.5 4-qadam: clamp() ga yig'amiz

Chegaralar — ikki nuqtaning shriftlari, rem da: 16px = 1rem, 18px = 1.125rem.

body {
  font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
}

O'qilishi: "shrift — 0.9511rem + 0.2174vw, lekin 1rem dan kichik va 1.125rem dan katta emas".

2.6 5-qadam: tekshiramiz

Chrome'da o'lchadik: 768 da 16.8872, 1024 da 17.4438 piksel. Qiymat 360 da esa 16.0002 — to'rt xonali yaxlitlash sabab juda kichik farq, ko'zga ko'rinmaydi. Undan tor ekranda chegara 16 ni ushlab turadi, 1280 dan kengda — 18 ni.

Endi Matematik funksiyalar darsidagi taxminiy sarlavhani aniq qilamiz. Talab: 360 da 28, 1280 da 48 piksel. Xuddi shu besh qadam:

qiyalik      = (48 − 28) ÷ 920 = 0.021739  →  2.1739vw
boshlang'ich = 28 − 360 × 0.021739 = 20.1739px  →  1.2609rem

<style>
  body {
    font-family: system-ui, sans-serif;
    font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
    color: #1f2a24;
    background-color: #fffaf0;
  }
  h1 {
    font-size: clamp(1.75rem, 1.2609rem + 2.1739vw, 3rem);
    color: #2f6b3a;
  }
  section {
    display: grid;
    gap: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
  }
  .taom-karta {
    padding: 0 1rem;
    border: 2px solid #2f6b3a;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
<section>
  <article class="taom-karta"><p>Osh — 35 000 so'm</p></article>
  <article class="taom-karta"><p>Manti — 30 000 so'm</p></article>
</section>

Uchala tugmani bosing. Nimaga qarang: sarlavha 28 → 36.87 → 48 piksel, matn 16 → 16.89 → 18, kartalar orasidagi joy 16 → 23.1 → 32 (Chrome'da o'lchangan). Bitta ham media query yo'q. gap formulasini «Fluid masofalar» bo'limida chiqaramiz.

Tekshirib ko'ring: clamp(1.25rem, 1.0543rem + 0.8696vw, 1.75rem) 360, 768 va 1280 piksellik ekranda necha piksel? Ideal qiymatni pikselga o'giring: 1.0543rem = 16.869px.

3. Nega rem + vw — zoom va "2.5 barobar" qoidasi

3.1 Qisqa eslatma

Viewport birliklari va Matematik funksiyalar darslarida ko'rdik: faqat vw dagi matn zoom'ga javob bermaydi. Zoom layout viewport'ni toraytiradi (Responsive dizayn tamoyillari), vw kichrayadi va kattalashish "yeyiladi". rem qismi esa zoom'da to'liq kattalashadi. Chegaralar ham rem da — ular foydalanuvchining shrift sozlamasiga ham javob beradi. clamp(16px, ..., 18px) deb px da yozsangiz, Large sozlamasi chegaralarga ta'sir qilmaydi.

3.2 Fluid matn zoom'da sekinroq o'sadi — o'lchadik

Lekin rem + vw ham zoom'ni to'liq "o'tkazmaydi". Ideal qiymatning vw qismi baribir kichrayadi. Windows 11'dagi Chrome'da 1280 piksellik oynada zoom'ni oshirib, sarlavhani o'lchadik. "Ekranda" — CSS piksel × zoom:

200% zoom'da sarlavha ikki barobar emas, atigi 1.42 barobar kattalashdi. Foydalanuvchi ko'proq zoom qilishi kerak: 400% da u 2 barobardan oshdi.

3.3 WCAG 1.4.4 va 2.5 barobar

WCAG'ning 1.4.4 mezoni: matnni 200% gacha kattalashtirish imkoni bo'lsin (Accessibility nima). Fluid matnda bu shunday tekshiriladi: brauzer zoom'ining eng katta darajasida matn kamida 2 barobar kattalashadimi? Chrome'da zoom 500% gacha boradi.

500% zoom'da 1280 piksellik oyna CSS uchun 256 piksel bo'ladi — kichik nuqtadan (360) ham tor. Demak shrift eng kichik chegarasida turadi va ekranda 5 × kichik bo'lib ko'rinadi. U 2 × katta dan kichik bo'lmasligi kerak:

5 × kichik ≥ 2 × katta   →   katta ≤ 2.5 × kichik

Chap tomon — 500% zoom'da ekranda ko'rinadigan o'lcham. O'ng tomon — WCAG talabi: 100% dagi o'lchamdan (bu yerda — katta chegara) ikki barobar. Ikkala tomonni 2 ga bo'lsak, o'ngdagi yozuv chiqadi.

Bu — "2.5 barobar" qoidasi: eng katta o'lcham eng kichigidan 2.5 barobardan oshmasin. Bizning sarlavha: 48 ÷ 28 = 1.71 — qoida bajariladi.

Endi buzilgan misol: clamp(1rem, 0.5rem + 5vw, 4rem) — 16 dan 64 gacha, 4 barobar. O'lchadik: 100% da 64, 500% da CSS'da 20.8 piksel — ekranda 104, ya'ni 1.63 barobar. Zoom'ning eng oxirida ham 2 barobarga yetmaydi. Yechim — kichik chegarani ko'tarish: 28 dan 64 gacha (2.29 barobar) formula clamp(1.75rem, 0.8696rem + 3.913vw, 4rem). O'lchadik: 500% da ekranda 140 piksel — 2.19 barobar.

Diqqat: Fluid tipografiya — asosan sarlavhalar uchun, ular o'rtasidagi farq katta. Oddiy matnda (16 → 18) farq kichik, zoom muammosi ham kichik. Oddiy matnni umuman fluid qilmaslik ham to'g'ri tanlov.

4. Fluid masofalar

Bo'sh joy ham shrift kabi o'sishi mumkin: telefonda kartalar orasida 16 piksel, kompyuterda 32. Formula aynan o'sha — faqat "shrift" o'rniga "masofa":

qiyalik      = (32 − 16) ÷ 920 = 0.017391  →  1.7391vw
boshlang'ich = 16 − 360 × 0.017391 = 9.7391px  →  0.6087rem

section {
  gap: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
}

Formula bo'limidagi natijada aynan shu gap edi: 768 da 23.1 piksel. Xuddi shunday padding, margin va konteyner chetlari uchun ham yoziladi. Masofada 2.5 barobar qoidasi yo'q — u matn emas. Faqat telefonda bo'sh joy juda kichik bo'lib ketmasin.

Tekshirib ko'ring: Karta ichki bo'sh joyi 360 da 12px, 1280 da 24px bo'lsin. clamp() ni yozing.

5. Tip shkalasi va Utopia

5.1 Shkala nima

Sahifada bitta emas, bir nechta o'lcham bor: kichik izoh, matn, h3, h2, h1. Ularni tasodifiy tanlamaslik uchun dizaynerlar tip shkalasi (type scale) ishlatadi: har keyingi o'lcham oldingisidan bir xil marta katta. Masalan, 1.2 marta: 16 → 19.2 → 23.04 → 27.65.

Fluid shkalada qiziq narsa bor: telefonda o'lchamlar orasidagi farq kichikroq 1.2-bob, kompyuterda kattaroq 1.25-bob. Tor ekranda katta sarlavha joy yemasin, keng ekranda esa ierarxiya aniq ko'rinsin. Har qadam — o'z formulasi:

Har qator uchun o'sha besh qadamni takrorlasangiz — beshta clamp(). Masalan, 2-qadam: clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem). Qo'lda hisoblash zerikarli. Shu uchun vosita bor. Shkalaning o'zi — qaysi nisbat, nechta qadam — Tipografik shkala darsida chuqurroq.

5.2 Utopia.fyi

Utopia (utopia.fyi) — James Gilyead va Trys Mudford yaratgan bepul kalkulyatorlar to'plami. Mualliflarning o'zi aytadiki, Utopia — mahsulot yoki kutubxona emas, fluid dizayn haqida fikrlash usuli. Kalkulyatorlar tipografiya, masofa va to'r uchun formulalarni hisoblaydi.

Tip kalkulyatoriga beriladigan qiymatlar:

• Kichik ekran: en, asosiy shrift o'lchami va shkala nisbati.
• Katta ekran: en, asosiy shrift va nisbat.
• Qadamlar soni: asosiy o'lchamdan yuqoriga va pastga nechta.

Chiqadigan narsa — CSS o'zgaruvchilari (CSS o'zgaruvchilari 1), har qadam uchun bitta clamp(): --step--1, --step-0, --step-1, --step-2. Masalan, sukut sozlamalarida --step-0:

:root {
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
}

Bu qatorni o'zimiz tekshiramiz. Utopia'ning sukut sozlamalari: 360 pikselda 18px, 1240 pikselda 20px. Bizning formula bo'yicha: qiyalik = 2 ÷ 880 = 0.0022727 → 0.2273vw; boshlang'ich = 18 − 360 × 0.0022727 = 17.1818px → 1.0739rem. Aynan Utopia chiqargan son. Vosita hech qanday sehr qilmaydi — bizning besh qadamni har qator uchun takrorlaydi.

Masofa kalkulyatori xuddi shu asosdan o'lchamlar to'plamini chiqaradi: --space-s, --space-m, --space-l kabi. Qo'shimcha — juftliklar, masalan --space-s-m: telefonda s o'lchami, kompyuterda m o'lchami. Bo'sh joy ekran bilan kuchliroq o'sishi kerak bo'lgan joyda — sahifa chetlari, bo'limlar orasi — shular ishlatiladi.

Kursda bu o'zgaruvchilarni hozircha kiritmaymiz: --shrift-* kabi nomlar Dizayn tokenlari darsida tizim sifatida keladi. Hozir clamp() ni to'g'ridan-to'g'ri yozamiz.

6. Konteyner birliklari bilan fluid

vw — butun ekranga bog'liq. Lekin taom kartasi ba'zan tor yon panelda, ba'zan keng asosiy ustunda turadi. Ekran bir xil — kartaning joyi har xil.

Buning uchun konteyner birliklari bor: 1cqi — kartaning konteyneri enining 1 foizi. Formula o'zgarmaydi, faqat vw o'rniga cqi:

section {
  container-type: inline-size;
}
.taom-nomi {
  font-size: clamp(1.125rem, 0.9783rem + 0.6522cqi, 1.5rem);
}

container-type: inline-size — "shu element — konteyner, uning eni o'lchansin". Endi .taom-nomi ekranga emas, section eniga qarab o'sadi. Utopia'da ham shu imkoniyat bor: natijani vw o'rniga konteynerga nisbatan chiqarish mumkin. Konteynerlarni Container queries darsida to'liq o'rganamiz. Baseline ma'lumotiga ko'ra konteyner o'lcham so'rovlari 2023-yil fevralidan beri hamma asosiy brauzerda.

7. Ko'p uchraydigan xatolar

7.1 Ideal qiymat faqat vw

clamp(1.75rem, 4vw, 3rem) — chegaralar oralig'ida zoom ishlamaydi. Tuzatish: formulani ikki nuqtadan chiqaring — boshlang'ich qism rem da bo'ladi.

7.2 Chegaralar px da

clamp(16px, ..., 18px) — shrift sozlamasi (Large) chegaralarga ta'sir qilmaydi. Tuzatish: chegaralar va boshlang'ich qism rem da.

7.3 Katta chegara kichigidan 2.5 barobardan ortiq

clamp(1rem, ..., 4rem) — eng katta zoom'da ham matn ikki barobarga yetmaydi («WCAG 1.4.4 va 2.5 barobar» qismi). Tuzatish: kichik chegarani ko'taring yoki kattasini tushiring.

7.4 Formuladagi ekran nuqtalari bilan chegaralar mos emas

clamp(1rem, 0.9511rem + 0.2174vw, 1.25rem) — formula 1280 da 18 ga yetadi, yuqori chegara esa 20 (1.25rem). Endi shrift 1280 dan keyin ham o'saveradi va 20 ga faqat 2200 pikselda yetadi. Tuzatish: chegaralar — aynan ikki nuqtadagi o'lchamlar.

7.5 Hamma narsani fluid qilish

Har bir padding, border va font-size da formula — kodni o'qib bo'lmaydi. Tuzatish: fluid — sarlavhalar va katta bo'shliqlar uchun. Qolgani oddiy rem.

8. Mashqlar

1-mashq (oson): Qiymatlarni hisoblang

h2 { font-size: clamp(1.375rem, 1.3261rem + 0.2174vw, 1.5rem); }. 1.3261rem = 21.2176px.

• 360 pikselda: px
• 1280 pikselda: px
• 1600 pikselda: px

2-mashq (o'rta): Taom nomi uchun formula

«Bahor» menyusidagi .taom-nomi: 360 pikselda 18px, 1280 pikselda 24px. Besh qadam bilan clamp() ni chiqaring va 768 pikseldagi qiymatni hisoblang.

.taom-nomi {
  font-size: clamp(1.125rem, 0.9783rem + 0.6522vw, 1.5rem);
}

3-mashq (qiyin): Aksiya sarlavhasini tekshiring

Stajyor aksiya bannerining sarlavhasiga shunday yozdi: font-size: clamp(0.875rem, 5vw, 5rem);

1. 360 va 1280 pikselda sarlavha necha piksel?
2. Uchta muammoni toping.
3. 360 da 28px, 1280 da 64px bo'ladigan to'g'ri formulani yozing va 2.5 barobar qoidasini tekshiring.

.aksiya {
  font-size: clamp(1.75rem, 0.8696rem + 3.913vw, 4rem);
}

4-mashq: Portfolio qadami — sakrashsiz tipografiya

O'tgan darsda body va h2 shrifti 64rem da sakrab o'zgaradigan qildik. Endi ularni fluid qilamiz va h1 formulasini aniq hisoblaymiz.

1. body: 360 da 16px, 1280 da 18px.
2. h2: 360 da 22px, 1280 da 24px.
3. h1: Matematik funksiyalar darsidagi clamp(1.75rem, 1.25rem + 2vw, 2.5rem) taxminan yozilgan edi. Uni 360 da 28px, 1280 da 40px bo'ladigan aniq formulaga almashtiring.
4. Loyihalar to'ridagi gap: 360 da 16px, 1280 da 32px.
5. 64rem blokidan shrift qatorlarini o'chiring. Blok bo'sh qolsa — uni ham.
6. 360, 768 va 1280 pikselda o'lchang va h1 uchun 2.5 barobar qoidasini tekshiring.

Ishora: har biri uchun besh qadam. body formulasi «Formula: ikki nuqta orasidagi chiziq» bo'limida tayyor.

body {
  font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
}
h1 {
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
}
h2 {
  font-size: clamp(1.375rem, 1.3261rem + 0.2174vw, 1.5rem);
}
.loyihalar {
  gap: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
    --rang-chegara: #c9d6cf;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
    line-height: 1.5;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1,
  h2 {
    color: var(--rang-asosiy);
    line-height: 1.2;
  }
  h1 {
    font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  }
  h2 {
    font-size: clamp(1.375rem, 1.3261rem + 0.2174vw, 1.5rem);
    margin-top: 0;
  }
  .loyihalar {
    display: grid;
    gap: clamp(1rem, 0.6087rem + 1.7391vw, 2rem);
  }
  .loyihalar article {
    padding: 1rem;
    border: 1px solid var(--rang-chegara);
    border-radius: 0.5rem;
  }
  @media (width >= 40rem) {
    .loyihalar {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML va CSS qismida qilgan ishlarim.</p>
  <div class="loyihalar">
    <article>
      <h2>Choyxona «Bahor» sayti</h2>
      <p>To'rt sahifali sayt: menyu jadvali, stol band qilish
      formasi va 404 sahifasi.</p>
    </article>
    <article>
      <h2>Semantik blog maqolasi</h2>
      <p>"Osh sirlari" maqolasi: landmarklar, sarlavhalar
      daraxti va izohli rasmlar.</p>
    </article>
  </div>
</main>

9. Real ishda

• Katta saytlar sarlavhalarni deyarli doim clamp() bilan yozadi. DevTools'da istalgan saytning h1 ini tanlang — Styles'da clamp(...) ni ko'p uchratasiz (DevTools'da CSS).
• Utopia chiqargan --step-* va --space-* o'zgaruvchilarini ko'p loyihada uchratasiz. Endi ularni o'qiy olasiz: har biri — ikki nuqtali clamp().
• Intervyuda so'raladi: "Fluid tipografiya nima?", "clamp() dagi o'rta qiymat qanday hisoblanadi?", "Nega faqat vw yomon?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• Fluid o'lcham — ikki nuqta (kichik ekran, kichik o'lcham) va (katta ekran, katta o'lcham) orasidagi to'g'ri chiziq.
• Besh qadam: qiyalik → vw qismi (× 100) → boshlang'ich (rem da) → clamp() → tekshiruv.
• Chegaralar va boshlang'ich — rem da; ideal qiymat rem + vw.
• Fluid matn zoom'da sekinroq o'sadi; eng katta o'lcham eng kichigidan 2.5 barobardan oshmasin.
• Masofalar ham xuddi shu formula bilan fluid bo'ladi. Utopia butun shkalani shu formula bilan chiqaradi.

Keyingi dars: Intrinsic layout — media query'siz layout: kontent o'zi moslashadigan to'r, "switcher" hiylasi va Every Layout primitivlari.

Manbalar

• MDN: "clamp()", "Viewport units", "Container query length units" — developer.mozilla.org
• Utopia: "Fluid type scale calculator", "Fluid space calculator" — utopia.fyi
• W3C: WCAG 2.2, 1.4.4 "Resize Text" — w3.org/WAI/WCAG22/Understanding
• web.dev: "Learn Design — Typography" — web.dev/learn/design/typography