Tipografiya β bu matnni vizual jihatdan tashkillashtirish san'ati. Veb dizaynda tipografiya juda muhim, chunki sahifa kontentining 95%i matn. Yaxshi tipografiya β matnni o'qiluvchan, jozibali va professional qiladi. Yomon esa foydalanuvchini quvib chiqaradi β matn o'qish qiyin bo'lsa, foydalanuvchi sahifani tark etadi. Web typography qoidalarini tushunish veb dizayner uchun majburiy.
Shrift turlari
Serif β kichik \"oyoqchalari\" bilan shriftlar (Times New Roman, Georgia, Lora). Klassik, professional, gazetada keng ishlatiladi. Veb'da kam ishlatiladi.
Sans-serif β \"oyoqchasiz\" shriftlar (Arial, Helvetica, Inter, Roboto). Modern, toza, ekranda yaxshi o'qiladi. Eng tarqalgan veb shrift turi.
Display β sarlavhalar uchun maxsus shriftlar (Bebas Neue, Playfair Display). Katta o'lchamda ko'rinishi yaxshi.
Monospace β har belgi bir xil enliqdagi (Courier, Monaco, Fira Code). Code uchun.
Script β qo'lda yozilgan shriftlar (Pacifico, Lobster). Maxsus joylarda, sarlavhalar uchun.
Shrift tanlash
Veb uchun 1-2 ta shrift yetadi. Heading uchun bittasi, body uchun boshqasi. Yoki ikkalasi ham bir shrift, lekin turli og'irlik (weight).
Tanlash mezonlari: o'qiluvchanlik (legibility), brand bilan moslik, available weights (Light, Regular, Medium, Bold, Black), file size.
Google Fonts
Eng mashhur bepul shrift kutubxonasi. 1500+ shrift, hammasi bepul ishlatiladigan. fonts.google.com.
Top Google shriftlar: Inter (modern), Roboto (Google'ning standart), Open Sans (klassik), Poppins (geometrik), Lora (serif).
Implementatsiya: <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">
Font-display: swap
Web shrift yuklash vaqtida sahifa qanday ko'rinishi. font-display: swap β sistemaga shrift'i ko'rsatib turadi, original shrift yuklanguncha. Bu LCP (Core Web Vital) yaxshi natija beradi.
Self-hosting shriftlar
Google Fonts'ni o'z sayt'ingizga yuklash. Tezlik yaxshilanadi (Google server'iga so'rov yo'q), GDPR muammosi yo'q.
google-webfonts-helper.herokuapp.com β kerakli shrift faqat kerakli weight'lar bilan yuklab olish.
Type scale
Type scale β har xil o'lchamdagi matnlarning ratsional munosabati. Matematik ratio ishlatish:
1.125 (Major Second): 16, 18, 20, 23, 26 β minimal hierarchy.
1.25 (Major Third): 16, 20, 25, 31, 39 β balanced.
1.333 (Perfect Fourth): 16, 21, 28, 38, 51 β dramatik hierarchy.
1.618 (Golden Ratio): 16, 26, 42, 68, 110 β eng dramatik.
Line height
Line height (qator balandligi) β matn o'qish uchun juda muhim. Body matn uchun 1.5-1.8 ideal. Sarlavhalar uchun 1.1-1.3.
Past line height (1.0) β matn siqilgan, o'qish qiyin. Yuqori (2.0+) β matn ajralib, oqim buziladi.
Letter spacing (tracking)
Letter spacing β belgilar orasi. Heading uchun -0.02em (yaqinroq). Body uchun 0 yoki +0.01em. UPPERCASE matn uchun +0.05em (kengayish).
Line length
Bir qator necha belgi bo'lishi. 45-75 belgi ideal (o'rtacha 65). Juda qisqa (30 belgidan kam) β ko'p eye movement. Juda uzun (90+ belgi) β foydalanuvchi sof qatorni saqlay olmaydi.
max-width: 65ch (ch β belgi kengligi birligi).
Hierarchy va contrast
Tipografik hierarchy β H1 eng katta, H2 kichikroq, body eng kichik. Vizual jihatdan aniq farq bo'lishi shart.
Misol: H1 48px Bold, H2 32px SemiBold, H3 24px Medium, body 16px Regular.
Color bilan ham hierarchy β sarlavhalar to'q rang, body neutral, kichik matnlar och rang.
Responsive typography
Mobile va desktop'da shrift o'lchamlari farqlanishi shart. Mobile'da matn katta bo'lishi yaxshi (16px+).
Modern yondashuv: clamp() funksiyasi. font-size: clamp(16px, 4vw, 24px) β minimum 16, viewport'ga moslashadi, maximum 24.
O'zbek/Rus shrift
Lotin shrift'lari odatda kirill belgilarni qo'llab-quvvatlaydi (Inter, Roboto, Open Sans). O'zbek diakritika (Κ», ΚΌ) ham mavjud.
Diakritika tekshiring: shrift sahifasida \"O'zbekcha\" yoki kirill matn ko'rsating va to'g'ri ko'rinishini tekshiring.
Web safe shriftlar
Web safe shriftlar β barcha operating sistemada bor: Arial, Helvetica, Times New Roman, Georgia, Verdana. Bularning hech qachon yuklash kerak emas β har doim mavjud.
System font stack: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif β har OS o'z native shriftini ishlatadi.
Variable fonts
2017'dan beri yangi format β variable font. Bir faylda barcha og'irliklar (100-900) va italic versiya. Klassik 6-7 fayl o'rniga 1 fayl.
File size kichik, performance yaxshi. Inter Variable, Roboto Flex β populyar variable shriftlar.
Sayt.uz tipografiya strategiyasi
Sayt.uz da yagona shrift β Inter. Variable font sifatida. Heading'lar uchun 600-700 weight, body uchun 400, kichik matn uchun 500 weight.
Type scale: 1.25 (Major Third). Body 16px, H6 18px, H5 20px, H4 25px, H3 31px, H2 39px, H1 49px.
Line height: body 1.7, headings 1.2. Letter spacing: headings -0.01em, body 0.
Responsive: clamp() bilan mobile/desktop balans. Mobile'da matn 16px minimum.
Self-hosting Inter shrift β Google Fonts emas. GDPR va tezlik. font-display: swap.