Dars xulosasi

• Tipografiya (Shrift san'ati) — interfeys matnlarini o'qilishi oson, chiroyli va qulay tarzda tartibga solish amaliyotidir.
• Typeface vs Font:
  • Typeface (Shrift) — butun oila nomi (masalan: Roboto, Times New Roman);
  • Font (Shrift turi) — shu oila ichidagi o'zgarish (masalan: Roboto Bold, Roboto 16px Regular).
• Shriftning 4 asosiy turi:
  1. Serif: Chiziqchali (serifli) klassik shriftlar. Kitoblar, jurnallar va rasmiy matnlarda ishlatiladi (Times New Roman, Merriweather).
  2. Sans Serif: Chiziqchasiz, zamonaviy, tekis shriftlar. Veb-saytlar va mobil ilovalar uchun 1-raqamli standart (Roboto, Inter, Arial).
  3. Dekorativ: Maxsus kayfiyat beruvchi, badiiy sarlavha shriftlari (Lobster, Cooper Black).
  4. Skript: Qo'l yozuviga o'xshash nafis shriftlar (Pacifico, Caveat).
• Jakob qonuni (Jakob's Law): Foydalanuvchilar o'zlari o'rganib qolgan sohaviy shriftlarni kutishadi (bank ilovasida ishonchli, toza sans-serif, kitob ilovasida serif).

Qo'shimcha ma'lumot

Shriftning 4 muhim jihati

1. Oila (Font Family): Inter, Roboto, Poppins.
2. O'lcham (Font Size): Sarlavhalar (24–32px), asosiy matn (14–16px), kichik eslatmalar (12px).
3. Qalinlik (Font Weight): Regular (400), Medium (500), SemiBold (600), Bold (700).
4. Interval (Line Height / Letter Spacing): Satrlar orasidagi masofa matn balandligining 140–150% bo'lishi o'qishni osonlashtiradi.

Atamalar lug'ati

Atama	Ma'nosi
Typography	Tipografiya — matn terish va joylashtirish san'ati
Typeface	Shrift oilasi (umumiy dizayn uslubi)
Font	Shriftning aniq og'irlik va o'lchamdagi ko'rinishi
Serif	Harflar uchidagi mayda ilmoqchalar / chiziqchalar
Sans Serif	"Sans" (fransuzcha "siz") — ilmoqchasiz, tekis harflar
Google Fonts	Bepul va ochiq kodli shriftlar katalogi (fonts.google.com)

Bilasizmi?

• Mobil ekranlarda Sans Serif shriftlar Serif shriftlarga qaraganda 20% tezroq o'qiladi, chunki kichik piksellarda ilmoqchalar ko'zni toliqtirishi mumkin.
• Apple o'z qurilmalari uchun maxsus San Francisco, Google esa Android uchun Roboto shriftini noldan ishlab chiqqan.

Topshiriqlar

1. Atamalarni farqlash oson

Typeface va Font farqini daftaringizga 2 ta aniq misol bilan yozing.

Kutiladigan natija: har misolda oila nomi (masalan, Roboto) va undagi variant (masalan, Roboto Bold Italic) alohida ko'rsatilgan.

2. Serif yoki Sans Serif? oson

Shriftlarni ikki guruhga ajrating: Times New Roman, Arial, Georgia, Open Sans, Merriweather, Roboto.

Kutiladigan natija: ikki ustunli jadval: chapda serif shriftlar, o'ngda sans serif shriftlar.

3. Google Fonts kashfiyoti oson

fonts.google.com saytida Inter, Roboto va Merriweather shriftlarini toping. Har birida nechta uslub (Light, Regular, Bold...) borligini yozing.

Kutiladigan natija: 3 qatorli ro'yxat: shrift nomi, turi (serif/sans serif) va uslublar soni.

4. Figma'da birinchi matn oson

Figma'da yangi Frame oching, T asbobi bilan «Mening birinchi tipografiya ishim» deb yozing va Typography bo'limida o'lchamni 32px, qalinlikni Bold qiling.

Kutiladigan natija: skrinshotda matn tanlangan va o'ng panelda 32 hamda Bold ko'rinib turibdi.

5. E-kutubxona sarlavhasi o'rta

«E-kutubxona» ilovasi uchun 3 darajali matn blokini yarating: katta sarlavha (Poppins Bold, 24px), qisqa ta'rif (Inter Regular, 14px), sana va muallif (Inter Light, 12px).

Kutiladigan natija: ko'z avval sarlavhaga, keyin ta'rifga, oxirida sanaga tushadi: o'lcham va qalinlik pasayib boradi.

6. Line height tajribasi o'rta

4 qatorli matn yozing. Uning Line Height qiymatini avval 120%, keyin 150% qiling. Ikki holatni yonma-yon qo'yib solishtiring.

Kutiladigan natija: ikki nusxa yonma-yon va 1-2 jumlalik xulosa: qaysi biri o'qishga qulayroq va nega.

7. Ikki xil kayfiyat o'rta

Qahvaxona logotipi uchun Pacifico (skript), texnologiya yangiliklari banneri uchun Roboto (sans serif) bilan 2 ta kichik banner chizing.

Kutiladigan natija: ikki banner: biri samimiy va iliq, ikkinchisi toza va neytral ko'rinadi.

8. Xatoni toping o'rta

Do'stingiz uzun maqolaning asosiy matniga Lobster (dekorativ) shriftini 12px qilib bergan. Bu yerda nechta xato bor? Har birini qanday tuzatasiz?

Kutiladigan natija: kamida 2 xato topilgan: dekorativ shrift uzun matnga mos emas va 12px mobil uchun juda kichik (14–16 kerak).

9. Jakob qonuni tahlili qiyin

Payme, Click yoki Uzum ilovasining skrinshotini oling. Qanday shrift turi ishlatilganini aniqlang va nega dekorativ shrift tanlanmaganini Jakob qonuni orqali asoslang.

Kutiladigan natija: skrinshot va 3-4 jumlalik tahlil: shrift turi, o'qilishi, foydalanuvchi kutishlari.

10. GOV.UK va The Atlantic qiyin

Nega GOV.UK sans serif, The Atlantic esa serif ishlatadi? «Shakl funksiyadan keyin» tamoyili bilan tushuntiring va har biriga yana bitta o'xshash sayt toping.

Kutiladigan natija: jadval: sayt, shrift turi, foydalanuvchi maqsadi (tez xizmat yoki uzoq o'qish).

11. Kirish imkoniyati qiyin

Keksa yoki ko'rishi past foydalanuvchi uchun matnni qulay qilishning 3 ta usulini yozing va bittasini Figma'da ko'rsating.

Kutiladigan natija: 3 ta usul (o'lcham, kontrast, sans serif yoki maxsus shrift) va bitta oldin/keyin namunasi.

12. Yangilik kartasi bonus

Figma'da to'liq mobil yangilik kartasini chizing: rasm, kategoriya tegi (10px Bold), sarlavha (18px SemiBold), qisqa xulosa (14px Regular), o'qish vaqti (12px, och rang).

Kutiladigan natija: 5 darajali aniq ierarxiyaga ega, toza va o'qilishi oson karta.

O'zingizni tekshiring

1. Tipografiya nima va u interfeysga nima beradi?
2. Typeface va font farqini misol bilan ayting.
3. Shriftning 4 asosiy jihati qaysilar?
4. Nega mobil ilovada sukut bo'yicha sans serif tavsiya etiladi?
5. Dekorativ va skript shriftlar qayerda ishlatiladi, qayerda ishlatilmaydi?
6. Figmada shrift sozlamalari qaysi bo'limda joylashgan?

Uyga vazifa

«Tipografik ierarxiya va shrift juftligi»: Figma'da Mobile (375x812) Frame oching, sarlavha va asosiy matn uchun ikki shrift tanlang va 4 darajali yangilik kartasini yarating (20–30 daqiqa). To'liq shart: uyga-vazifa.md.