Ajoyib veb-sayt chiroyli tipografiyadan boshlanadi. Va ba'zi qoidalarni buzish mumkin bo'lsa-da, ba'zida to'g'ri ish - yaxshi tipografiya nima va uni qanday yaratish kerakligi haqidagi asosiy tamoyillarga qaytish.

Ushbu eslatma dizayningizga yangi ko'zlar bilan qarashga, yangi yondashuvlar haqida o'ylashga yoki oddiyroq dizaynga qaytishga yordam beradi.

Shunday qilib, bugun biz moda tendentsiyalarini e'tiborsiz qoldirib, tipografiya nazariyasiga e'tibor qaratamiz va "qoidalar" bizga chiroyli matn yaratishda qanday yordam berishi mumkin.

Hajmi va ierarxiyasi

Hajmi muhim. O'qiladigan tipografiyani yaratish uchun bu muhim omil bo'lishi mumkin. Kichik matnni o'qish u yoqda tursin, ko'rish qiyin va juda katta matn chiziq balandligidan oshib ketadi va chalkashlikka olib keladi.

O'qiladigan tipografiya bir nechta ierarxiya qatlamlariga ega. Ushbu qatlamlar foydalanuvchiga birinchi, ikkinchi va uchinchi narsalarni o'qishni aytadi. Bundan tashqari, matn o'lchamlarida aniq ierarxiya mavjud - bir o'lcham sarlavhalar uchun, ikkinchisi asosiy matn uchun va uchinchisi kichik sarlavhalar uchun.

Kuzatuv va kerning

Kuzatuv va kerning ko'pincha chalkashib ketadi. Kerning - harflar orasidagi masofani shakliga qarab tanlab o'zgartirish jarayoni. Kuzatuv - bu harflar to'plami, ya'ni paragraflar yoki butun matn bloki orasidagi masofani o'zgartirish.

Kerning ko'pincha aniqlik yaratish, o'qishni yaxshilash va hatto matnning katta qismlarini stilize qilish uchun muayyan elementlarga qo'llaniladi. Kuzatuv ko'pincha juda keng bo'lgan asosiy matn shriftini toraytirish uchun ishlatiladi.

Siz qo'llaydigan shrift uslublari sonini cheklang

Ko'pgina loyihalar uchun ikki yoki uchta uslub etarli bo'ladi. Noto'g'ri tanlov qilishning oldini olish uchun juda ko'p uslublar mavjud bo'lgan shriftlar oilasini toping. Eng yaxshi sifatli shriftlar turli xil uslublarda bo'ladi - qalin, oddiy, kursiv, siqilgan, qora va boshqalar.

Uslublarni aralashtirish va solishtirish

Men ikki xil uslubni tanlashni tavsiya qilaman. Eng keng tarqalgan juftlik serif va sans serifdir. Turli uslublar va zarbalarni birlashtirganda, bir xil balandlik va chashka shakliga ega bo'lgan harflarni qidiring ("o" kabi yopiq harflar ichidagi bo'sh joy).

Ushbu kichik tafsilotlar ushbu shriftlarning birgalikda ko'rinishi va matnni o'qish qanchalik oson ekanligida katta farq qiladi.

O'tkazish va moslashtirish

Aksariyat hollarda qatorlarni uzish va asoslash kerak emas. Onlayn matn bo'lsa, bu usullar uning tez assimilyatsiyasi va tushunishini qiyinlashtiradi. Defislar o'qishga xalaqit beradi va to'liq asoslash ko'pincha o'qib bo'lmaydigan formatlashga olib keladi.

Shriftlarni o'zgartirmang

Hech qachon shriftni o'zgartirmang. Uni qalinroq, ingichka yoki balandroq qilishga urinmang. Boshqasini tanlash yaxshidir.

Shrift dizaynerlari shriftning o'qilishi va uslub talablariga javob berishiga ko'p vaqt sarflashadi. Hech narsani o'zgartirishga hojat yo'q. Siz uni yaxshilay olmaysiz va ko'p hollarda siz faqat hamma narsani buzasiz.

Agar shrift sizga mos kelmasa, boshqa narsani qidiring. Identifont o'xshash shrift vositasidan, o'xshash shriftlarni aniqlaydigan vositadan foydalaning.

Kontrast

Kontrast yaratish uchun tipografiyadan foydalaning. Ierarxiyani yaratish uchun turli o'lchamlardan foydalanganingizdek, shriftning vazni, rangi va uslubini o'zgartirib, vizual qiziqishni yarating.

Rang kontrast yaratishning eng samarali va eng oddiy usullaridan biridir. Ideal kontrast yorug'lik fonida quyuq matn (yoki aksincha). Ushbu maqsadga erishishga yordam beradigan deyarli cheksiz ranglar diapazoni mavjud. Rang va tipografiya bilan o'ynaganingizda, yorqin ko'kda yorqin qizil kabi ba'zi rang kombinatsiyalarini o'qish juda qiyin bo'lishi mumkinligini yodda tuting.

Kontrast haqida gap ketganda, o'qilishi mumkin bo'lgan matn yaratish uchun oddiy fondan foydalanish yaxshidir. Ammo agar u tasvirlar yoki naqshlar kabi vizual elementlarni o'z ichiga olsa, unda harflar hajmini oshiring - bu fon va oldingi matn elementlari o'rtasida bo'linishni yaratadi.

Qo'ng'iroq chizig'i formati

Yozuv paneli formati - bu matnni o'z ichiga olgan konteyner hajmi. Bu butun matn ramkasining kengligi yoki bitta ustun bo'lishi mumkin.

Chiziq formati muhim, chunki ekrandagi belgilar soni (shu jumladan bo'shliqlar, maxsus belgilar va tinish belgilari) o'qishga ta'sir qiladi. Agar chiziqlar juda uzun yoki juda qisqa bo'lsa, foydalanuvchining ko'zlari ular bo'ylab harakatlanishi qiyin bo'ladi.

"Tipografik uslub elementlari" dan: "45 dan 75 gacha bo'lgan belgilarning har qanday soni bitta ustunli matn terish uchun qoniqarli chiziq uzunligi hisoblanadi. 66 belgidan iborat satr (shu jumladan harflar va bo'shliqlar) ideal deb hisoblanadi. Ko'p ustunli yozish uchun ideal o'rta variant 40-50 belgidan iborat chiziq bo'ladi.

Ushbu kitob nashr etilganda hech kim mobil tipografiya haqida o'ylamagan bo'lsa ham, ko'p ustunli matn terish bo'yicha tavsiyalar dolzarbligicha qolmoqda. Kichkina ekranli holatlarda siz hatto har bir satrda 35 ta belgidan foydalanishingiz mumkin.

Kerri Kuzins maqolasining tarjimasi

Ushbu roʻyxat ikkinchi chorak yakunlari boʻyicha tuzilgan. 2008 yil. Oldingi "hit paradlar" ni topish mumkin va.

Har bir misol qisqa sharh bilan birga keladi va skrinshotni bosish asl saytga olib keladi.

Urug'lik konferentsiyasi

Chiroq yo'q, rasmlar yo'q, keraksiz shovqin yo'q; faqat yaxshi uslubdagi shrift va yaxshi yozilgan matn: shunchaki shrift bilan ajoyib natijalarga erishishingiz mumkinligining haqiqiy isboti. Men shunga o'xshash yana bir nechta misollarni ko'rmoqchiman.

Yangiliklarni loyihalash

Sarlavha va asosiy tarkib o'rtasidagi ajoyib kontrast, juda ko'p toza joy va yaxshi tashkilot.

OmniTI

Chiroyli logotip, aniq matn va juda chiroyli ranglar. Dizaynni ishlab chiqish haqida ko'proq o'qishingiz mumkin.

Designr.it

Ajoyib bezakli logotip (bu qanday shrift ekanligini kimdir biladimi?) va juda ko'p nozik tafsilotlar.

Dizayn ko'rinishi

Endi Rutledj - dizayner bo'lib, u o'zi ilgari surgan tamoyillarga amal qiladi. Maqolaning nashr etilgan sanasiga qarab shrift hajmini qanday o'zgartirishi menga yoqadi, shuning uchun eng so'nggi matn eng katta shriftga mos keladi.

WordPress.org va WP 2.5.x administratori

WordPress blog platformasi veb-saytga asoslanmagan bo'lsa-da, ularning sayti har kuni minglab, balki millionlab ekranlarimizda namoyish etiladi. Ko'proq onlayn va oflayn ilovalar shunday yaxshi ko'rinishini istardim.

Bizning turimiz

Men ushbu saytni sharhga kiritishni xohlamadim, chunki u Flashdan foydalanadi. Biroq, u ajoyib shriftlarni ko'rsatishda juda yaxshi ish qiladi (va ba'zi sevimlilarim, men qo'shishim mumkin).

Pastki

Butun shriftlarga asoslangan boshqa sayt. Ierarxiya va tartibning ajoyib namunasi. "Fotosurat ming so'zdan ko'proq gapiradi" deb kim aytdi? Yo'q, shrift yaxshiroq gapiradi.

Jahannam Ha do'stim

Ko'p ma'lumotlar olomonni his qilmasdan, shuningdek, sayt yaxshi tartibli tarmoqqa bog'langan.

Axborot arxitektorlari

Dizaynerlar katta to'ldirilmagan maydonlardan va cheklangan rang oralig'idan qo'rqmadilar.

Naz Hamid

Juda qoyil. O'zi uchun gapiradigan dizayn.

Jon Tan

Tipografik jihatdan boy, nafis va betartibliksiz, logotip esa... bu rasm emas!

Ko'rib chiqilmoqda

U erda juda ko'p yaxshi tashkil etilgan ma'lumotlar mavjud va ular chiroyli tanlangan ranglar palitrasi bilan birga keladi.

Elliot Jey aksiyalari

Ushbu sayt ko'plab tanlovlarda nomzod bo'lgan. Bu shriftlardan yaxshi foydalanish tufayli bu erga keldi.

Biz qiladigan narsalar

Rangli, tartibli va katta shrift.

Keyingi maqolada, "Internet uchun tipografiyaga chuqur qarash" biz ushbu saytlarning ba'zilarini batafsil ko'rib chiqamiz.

Typewolf shrift resursi kuratori Jeremi Shoaf qiziqarli shrift yechimlari bo'lgan saytlar namunalarini tanladi va ularning afzalliklari va kamchiliklarini tasvirlab berdi.

Yupqa qog'oz teksturasi bilan birgalikda bu tipografiya kitob o'qish hissini yaratadi.

Oddiygina Gum

Mahsulot qadoqlash tipografiyasini ishlab chiqaruvchining veb-saytining tipografiyasiga moslashtirishga yordam beradigan veb-shriftlar tufayli. Bu ko'proq va tez-tez sodir bo'lmoqda. Simply Gum o'zining brend identifikatori sifatida Gothamni tanladi va bu identifikatsiyani onlayn va oflayn kanallarda izchil saqladi.

Ushbu sayt ba'zan faqat bitta uslub kerak bo'lganiga yaxshi misoldir. Gothamning turli og'irliklari va bosh harflarini ishlatib, Simply Gum faqat bitta og'irlik bilan aniq ierarxiyani o'rnatdi.

Sarlavha va altbilgidagi logotiplar PNG formatida, shuning uchun ular veb-shriftning ravshanligi va kengaytirilishini yo'qotadi. Logotipingiz uchun veb-shriftdan foydalanish har doim ham mumkin emas, ayniqsa kerning ustidan yaxshi nazorat kerak bo'lsa; ammo, bu holda SVG tasviri PNG tasviridan yaxshiroqdir, chunki u o'lchamli bo'lishi mumkin va hali ham ravshanligini saqlab qoladi.

Qisqacha xulosa

Yaxshiyamki, yuqoridagi misollar ba'zi tipografiya qarorlari dizaynga qanday ta'sir qilishi mumkinligini ko'rsatdi. Mana bir nechta asosiy fikrlar:

  • Agar siz bir nechta og'irliklardan foydalanmoqchi bo'lsangiz, o'zingizning maxsus tipografiyangizda izchil tizimni ishlab chiqing va unga rioya qiling.
  • Asosiy matn uchun oddiy kursiv, qalin va qalin kursiv uslublari bo'lgan shriftni tanlang.
  • Agar siz ommabop shriftni tanlamoqchi bo'lsangiz, uni kamroq tarqalgan shrift bilan bog'lab ko'ring va dizayn ajralib turadi.
  • Jamoa a'zolari orasida shriftlardan izchil foydalanishni ta'minlash uchun loyihaning boshida uslublar qo'llanmasini yarating.
  • O'xshash uslublardan ko'ra kontrastdan foydalaning.
  • Asosiy matn uchun ekran shriftlaridan foydalanmang. Uslublardan maqsadga muvofiq foydalaning.
  • Faqat bitta uslubdagi oiladan foydalanishdan qo'rqmang. Siz bitta oilada turli vazn va uslublar bilan ierarxiya o'rnatishingiz mumkin.
  • Agar logotipingiz ruxsat bersa, aniqlik va kengayish uchun uni SVG formatida qiling.