DEV Community

Cover image for UX/UI Typography
Samandar Hodiev
Samandar Hodiev

Posted on

UX/UI Typography

Typography deganda nimani tushunamiz?

Typography bu:

  • qaysi shrift ishlatiladi
  • qaysi joyda qanchalik katta bo‘ladi
  • qanchalik qalin bo‘ladi
  • qatorlar orasidagi masofa
  • rang va kontrast
  • matnlar o‘rtasidagi iyerarxiya

Ya’ni foydalanuvchi sahifani ochganda:

  • nimani birinchi ko‘radi
  • nimani keyin o‘qiydi
  • nimani umuman o‘qimaydi

Shularning hammasini typography hal qiladi.


Nega typography UX uchun muhim?

Chunki foydalanuvchi o‘qish uchun keladi.

  • mahsulot nomini
  • tugma yozuvini
  • xabarini
  • narxni

Agar o‘qish qiyin bo‘lsa, dizayn chiroyli bo‘lishining foydasi yo‘q.


UX’da bir qoida bor:

“O‘qib bo‘lmasa, ishlamaydi.”

  • Font tanlash: kamroq — yaxshiroq
  • Yangi dizaynerlarning eng katta xatosi — ko‘p font ishlatish.

Aslida:

_ 1 ta asosiy font 1 ta yordamchi font yetarli_


UX/UI’da eng ko‘p ishlatiladigan fontlar:

  • Inter
  • Roboto
  • SF Pro
  • Poppins

Sababi oddiy: ular ekranda yaxshi o‘qiladi. Chiroyli bo‘lgani uchun emas, qulay bo‘lgani uchun.


Typography’ning yuragi — iyerarxiya.

Agar:

  • sarlavha
  • matn
  • yordamchi text

BUlar bir xil ko‘rinsa, foydalanuvchi chalgiydi.


Oddiy misol:

  • Heading - kattaroq, qalinroq
  • Body text - oddiy, tinch
  • Secondary text - kichikroq, rangsizroq

Hamma joyni bold qilish bu "best practise" va yaxshi dizayn emas


Line-height va spacing: ko‘rinmaydi, lekin seziladi

Ko‘pchilik e’tibor bermaydigan joy.

Juda zich matn:

  • professional ko‘rinmaydi
  • o‘qishni qiyinlashtiradi

Body text uchun:

  • line-height odatda 140–160%

Bu matnga “nafislik” beradi.


Rang va typography

  • asosiy text juda qora bo‘lmasligi kerak
  • secondary text haddan tashqari xira bo‘lmasligi kerak
  • kontrast yetarli bo‘lishi shart Chiroyli, lekin o‘qilmaydigan matn — bu dizayn xatosi.

UX’da ranglar o‘qilishgaham xizmat qiladi faqat bezakka emas.


Button va UI elementlardagi typography

Button ichidagi matn:

  • aniq
  • qisqa
  • tushunarli

Shuning uchun:

  • juda kichik bo‘lmasligi kerak
  • juda yengil weight bo‘lmasligi kerak

Foydalanuvchi nima bosayotganini aniq bilishi shart.


Typography system: professional bosqich

Real loyihalarda typography tasodifiy bo‘lmaydi.

  • Heading styles
  • Body styles
  • Caption styles
  • Button text styles

oldindan belgilanadi va dizayn davomida o‘zgarmaydi.

Bu:

  • dizaynni bir xil qiladi
  • developer uchun tushunarli bo‘ladi
  • product o‘sayotganda muammo chiqarmaydi

Xulosa

UX/UI’da typography:

  • bezak emas
  • ikkinchi darajali narsa emas
  • “keyin tuzatamiz” qilinadigan detal emas

Yomon typography bilan:

  • yaxshi layout ham yomon ko‘rinadi
  • foydalanuvchi charchaydi
  • mahsulot ishonchsiz tuyuladi

Yaxshi typography esa:

  • dizaynni tushunarli bo'ladi
  • foydalanuvchini majburlamaydi
  • professional taassurot qoldiradi

Top comments (0)