UX/UI Typography

Source: Dev.to

Typography deganda nimani tushunamiz?

• Qaysi shrift ishlatiladi
• Qaysi joyda qanchalik katta bo‘ladi
• Qanchalik qalin bo‘ladi
• Qatorlar orasidagi masofa
• Rang va kontrast
• Matnlar o‘rtasidagi iyerarxiya

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?

Foydalanuvchi o‘qish uchun keladi. U quyidagilarni o‘qiydi:

• Mahsulot nomi
• Tugma yozuvi
• Xatolik xabari
• Narx

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

UX/UI’da eng ko‘p ishlatiladiganlari:

• 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 bir xil ko‘rinsa, foydalanuvchi chalg‘iydi.

Oddiy misol:

Barcha joyni bold qilish “best practice” 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 — dizayn xatosi. UX’da ranglar o‘qilish uchun ham xizmat qiladi, faqat bezak uchun 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. Quyidagi uslublar oldindan belgilanadi va dizayn davomida o‘zgarmaydi:

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

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 qiladi
• Foydalanuvchini majburlamaydi
• Professional taassurot qoldiradi

UX’da ba’zan eng kuchli dizayn qarori — kamroq, ammo aniq yozuv bo‘ladi.

Agar xohlasangiz, bu maqolani ingliz tilida dev.to formatiga moslab, real UI misollar bilan boyitish yoki “typography checklist for junior UX/UI designers” qilib chiqarish mumkin. Bu mavzu chuqur, lekin aynan shu chuqurlik dizaynerni ajratib turadi.