Grafik dizayndagi shriftlarning miqdori va sifati haqida. Veb-dizayndagi tipografiya: asoslar va foydalanish Ranglar yaxshi kontrastga ega ekanligiga ishonch hosil qiling

Kelishi bilan shaxsiy kompyuterlar va birinchi ish stoli nashriyot tizimlari, tipografiyada tektonik siljish yuz berdi, uning oqibatlari endigina sezilarli bo'lib bormoqda. Bu tipografiyadagi birinchi global o'zgarish emas; boshqalar ham bo'lgan. Sanoat olamining mashinalari hunarmandlarni mag'lub etgan vaqtni eslash kifoya. Ommaviy ishlab chiqarish va foyda shriftlarning go'zalligidan ko'ra muhimroq bo'ldi. Miqdor sifatdan ko'ra muhimroq edi.

Buyuk ustalar yangi shriftlarni yaratishni to'xtatdilar, allaqachon mavjud bo'lganlar kitoblarni chop etish uchun mos edi. Hunarmandlar qanchalik professional bo‘lmasin, bekor yurib, texnologik jarayonning bir qismiga aylanib qolishdi.

Biroq, sanoatizmning g'alabasi, bosma mashinalarning paydo bo'lishi bilan buyuk ustalarning yo'q bo'lib ketishini anglatmaydi. Bu ikki dunyo bir-biridan mustaqil yashashda davom etdi – matbaachilar hunarmandlarning iste’dodini tan oldilar va ular o‘z navbatida taraqqiyotni to‘xtatib bo‘lmasligini angladilar. Bu tipografiyadagi ikkinchi o'zgarish bo'lib, natijada u o'zining "ruhi" ning bir qismini yoki, aytganda, insoniylikni yo'qotdi. Ammo yaqinda nima bo'lganini tushunish uchun siz 500 yil orqaga sayohat qilishingiz va hammasi qaerdan boshlanganini bilib olishingiz kerak bo'ladi.

BIRINCHI O'TISH

Yangi va eski o'rtasidagi birinchi ziddiyat birinchi bosmaxona ixtiro qilingandan keyin paydo bo'lgan. Uning yaratuvchisi Yoxannes Guttenberg mashinadan soatiga 240 sahifani bosib chiqarish tezligi bilan turli xil kompozitsiyalarni yaratishda foydalanishi mumkin edi. Bu inqilob edi.

Bundan oldin barcha kitoblar butunlay qo'lda yaratilgan. O'tmishdagi tomlar qo'lda yozilgan va murakkab dizayn va dizaynlar bilan bezatilgan. Nusxa ko'chirish jarayoni juda uzoq davom etdi, ammo natijada har qanday kitob, hatto nusxasi ham san'at asari edi.

Albatta, birinchi bosma kitoblarni qo'lda yozilganlar bilan taqqoslab bo'lmaydi. Ular ayniqsa chiroyli emas edi, lekin ular kichikroq va arzonroq edi. Va eng muhimi: alohida belgilar va butun shrift oilalarini almashtirish qobiliyati kitoblarni nafaqat lotin tilida, balki boshqa Evropa tillarida ham chop etish imkonini berdi.

Odamlar bu o'zgarishlarni faqat mamnuniyat bilan qabul qilishdi. Ularga o‘zlari tushunadigan tildagi kitoblar va o‘zlari bilan olib keta oladigan kitoblar kerak edi. Ular bilimga chanqoq edilar va bosma kitoblar uni qondirdi.

Biroq, birinchi o'tish natijasida kitob o'zining insoniyligini yo'qotdi. Mashinalar asosiy jarayonni o'z zimmasiga oldi, ammo hunarmandlar hali ham talabga ega edi. Har bir harf qo'lda o'yilgan, dizayn va rasmlar ham odamlar tomonidan yaratilgan. Biroq, ko'p vaqt o'tmay, hunarmandchilik kitob ishlab chiqarish jarayonidan so'na boshlaydi.

RAQAMLI YOSH

Birinchi o'tish qo'lda yozilgan kitoblarni yo'q qildi. Sanoatlashtirish, nihoyat, bosmaxonani insoniylikdan mahrum qildi, hamma narsa mexanizatsiyalashdi va usta hunarmandlar ishsiz qoldi. Ammo uchinchi o'tish, nihoyat, tipografiyani san'at sifatida tugatdi. Bugungi kunda aksariyat minigarnituralar hayratlanarli darajada xususiyatsizdir. Bu shunchaki kompyuterdagi shriftlar to'plami. U yoki bu shrift tarixini deyarli hech kim bilmaydi. Bu bilan hech kim qiziqmaydi. Biz mos uslubni izlash uchun bir daqiqada yuzlab shriftlarni aylanib chiqamiz va qolgan hamma narsa unchalik muhim emas.

_______________________

"Bizning kompyuterlashtirilgan dunyomizda shriftlarning ko'payishi va ularning turli xil o'zgarishlari yangi daraja bizning madaniyatimizga bevosita tahdid soladigan vizual ifloslanish, deydi dizayner Massimo Vignelli. "Minglab shriftlardan bizga bir nechta asosiy shriftlar kerak, chunki qolganlari shunchaki axlat."
_______________________

Qaysidir ma'noda u haq. Tipografiya shunchaki shriftlar emas. Bu faqat chiroyli harflar emas, ular boshqa narsa, bizni his qiladigan narsadir. Aslida, tipografiya xabardir. Mashhur rus matbaachisi Lazar Lissitskiyning fikriga ko'ra, tipografiya o'quvchiga ma'ruzachi aytgan fikrni optik jihatdan etkazishi kerak.

Pergamentga qalam bilan yozmaganiga ancha bo‘ldi. Bosma siyoh hidi anqib turgan qo‘pol qog‘oz o‘tib ketdi. Yaltiroq bosib chiqarish bozori mikroskopik hajmlarga qisqardi. Bugun biz chop etilmagan, lekin terilgan matnlarni o'qiymiz va ularni qog'ozda umuman o'qimaymiz. Va, aftidan, tipografiya boshqa o'tish davrida. Bu qanday bo'lishini hech kim bilmaydi, lekin, shekilli, qog'ozdan so'ng, bizga tanish bo'lgan displeylar eskiradi. Keyingi inqilob qachon sodir bo'lishini aytish qiyin, lekin yangi o'tish albatta bo'ladi.

Bularning barchasida eng achinarlisi shundaki, odamlar mukammallikka intilishda o'zlarining bir qismini yo'qotdilar. Bugungi kunda xattotlik mahorati deyarli hech kimga kerak emas. Bu uzoq vaqt talab etadi, g'amxo'rlik va qat'iyat talab qiladi. Bugungi kunda bu hech qanday ma'noga ega emas - axir, har qanday lazzat uchun naushniklar mavjud. Biz zombi kabi shriftlarni tanlaymiz: ism, o'lcham, uslub... Xabar? Xabar? Kompyuter shriftlari ortida hech qanday xabar yo'q, hikoya yo'q, hech narsa yo'q.

O'TGANGA NOSTALGIYA

Bugungi kunda ko'plab dizaynerlar matnga kerakli individuallikni beradigan yangi shriftlarga ehtiyoj sezmoqda. Tipografiya bilan ishlashning ko'plab usullari mavjud va ularning har biri bitta maqsadni ko'zlaydi - raqamli shriftlarning shaxsiyatsizligidan qochish. Hamma narsa qo'llaniladi - rang kontrasti, hajm illyuziyasi, salbiy bo'shliq, qisqasi, standart shriftni biroz kamroq standartga aylantira oladigan hamma narsa.


Va shu nuqtai nazardan, dizaynerlarning shriftlarning yo'qolgan haqiqiyligini qaytarish istagini ko'rsatadigan uchta o'sib borayotgan tendentsiyani qayd etishimiz mumkin. Tipografiyada faqat uchta asosiy tendentsiya mavjud, ammo ularni sezmaslik qiyin, chunki ular hamma joyda paydo bo'ladi. Biz retro, akvarel va qalpoq kabi uslublar haqida gapiramiz.

VINTAGE GRUNGE TIPOGRAFIYASI

Men tipografiya haqidagi eski maqolani tuzatdim, uni ko'rmaganlar uchun o'qish siz uchun foydali bo'ladi

Tipografiya- veb-dizaynning eng muhim jihatlaridan biri, chunki uning yordami bilan asosiy ma'lumotlar uzatiladi. Afsuski, ko'plab dizaynerlar va mijozlar o'z loyihalari uchun bir yoki ikkita "tasdiqlangan" shriftlarni tanlab, jasur eksperimentlardan qo'rqishadi.

Shunday qilib, ushbu maqola tipografiya ummonida adashganlarga bag'ishlangan. Biz tipografiya asoslari, shriftlarning qanday turlari borligi va shriftlarning tuzilishi haqida gapiramiz.

Shriftlar va shriftlar - farqi nimada?

Ko'pchilik "shrift" va "shrift" so'zlarini bir-birining o'rnida ishlatadi. Aslida, bu bir xil narsa emas, endi nima uchun tushuntiraman.

Eshitish vositasi yozilishi/chop etilishi mumkin bo‘lgan stilistik jihatdan o‘xshash belgilar to‘plamidir. Bu raqamlar, harflar, belgilar. Shrift- Bu o'lcham va uslub kabi bir nechta omillar bilan belgilanadigan torroq tushunchadir. Umuman olganda, Arial shrift, Arial Bold esa shrift.

Tasniflash

Shriftlarni bir necha guruhlarga bo'lish mumkin - serif (serif), sans serif (sans-serif), qo'lda yozilgan (skript), displey (displey). Biroq, tasniflashning boshqa turlari mavjud.

Serif shriftlari, Antiqua (Serif)

Ular shunday deb nomlanadi, chunki har bir harf kichik seriflarga ega. Veb-dizaynda katta hajmdagi matn bloklarini chop etishda ularni o'qish qiyin deb hisoblangani uchun tavsiya etilmaydi. Ushbu shriftlar odatda sarlavhalar uchun ishlatiladi.

Serif shriftlarining bir nechta kichik turlari mavjud - masalan, Eski uslub("Eski uslub" - ularni gumanistlar deb ham atashadi, gumanistik serif) - bu tasnifning birinchi shriftlari, ular 1400-yillarda ishlatilgan. Ularning o'ziga xos xususiyati- ramzning burchak ostida joylashgan qismi yupqalashib ketishi. Shriftlarga misollar Adobe Jenson, Centaur va Goudy Old Style.

O'tish davri seriflari- 1700-yillarda ishlatilgan. Bunga Times New Roman va Baskerville, shuningdek, Caslon, Georgia va Bookman kabi shriftlar kiradi. Ularning harflarning qalin va ingichka qismlari o'rtasidagi farqi Eski uslubga qaraganda ancha sezilarli, ammo Modernga qaraganda kamroq seziladi.

Zamonaviy seriflar (yangi uslub antiqa)- 1700-yillardan keyin ishlatilgan va belgilarning qalin va ingichka qismlari o'rtasida kuchli kontrastga ega. Bunga Didot va Bodoni kabi shriftlar kiradi

Va nihoyat , Slab seriflari (Slab shriftlari)- odatda barcha chiziqlarning qalinligi bir xil bo'lib, uchlarida katta seriflar mavjud

Kesilgan shriftlar, Grotesklar (Sans Serif)

Serif shriftlari shunday deb ataladi, chunki ularda seriflar yo'q). Ular zamonaviyroq ko'rinadi va ular 18-asrda qo'llanila boshlandi.

Sans serif shriftlarining 4 ta asosiy turi: Grotesk (eski grotesk), neogrotesk (yangi grotesk), gumanistik (gumanistik) va geometrik (geometrik).
Qadimgi grotesklar- birinchilari, ular serif shriftlariga o'xshaydi, lekin serifsiz.
Masalan, Franklin Gothic va Akzidenze

Yangi grotesklar eski grotesklarga nisbatan soddalashtirilgan ko'rinishga ega. Bugungi kunda eng mashhur shriftlarning aksariyati yangi sans seriflardir, masalan, MS Sans Serif, Arial, Helvetica va Univers.

Gumanistlar- boshqa barcha sans serif shriftlariga qaraganda ko'proq kalligrafik (ya'ni, ularning chiziq qalinligi o'zgaradi). Bularga, masalan, Gill Sans, Frutiger, Tahoma, Verdana, Optima va Lucide Grande kiradi - ular ko'pincha sayt tanasini to'ldirish uchun ishlatiladi.

Geometrik muntazam raqamlarga asoslanib, masalan, "O" - aylana va boshqalar; eng zamonaviy sans serif shriftlari hisoblanadi. Misollar - ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Qo'lda yozilgan (skript)

Qo'lda yozilgan shriftlar qo'l yozuviga asoslangan. Bunday shriftlarning ikki turi mavjud - rasmiy va tasodifiy. Rasmiylari qo'lda yozilgan bo'lib, 17-18-asrlarga tegishli. Ba'zi shriftlar Jorj Snell va Jorj Bikxem kabi mashhur rassomlarning qo'lyozmalariga asoslangan. Zamonaviy shriftlarga misol sifatida siz Kuenstler skriptini olishingiz mumkin. Chiroyli va nafis bo'lsa-da, sahifaning asosiy qismiga mos kelmaydi.

Tasodifiy shriftlar zamonaviyroq versiya bo'lib, ular 20-asrda paydo bo'lgan. Bu kamroq rasmiy, ko'pincha qalin zarbalar va cho'tka zarbasi effekti bilan. Bu shriftlarga Mistral va Brush skriptlari kiradi.

Shriftlarni ko'rsatish

Displey shriftlari toifasi odatda matn yozish uchun mos bo'lmagan shriftlarni o'z ichiga oladi. Ko'pincha ular aksan sifatida xizmat qiladi. Ular odatda chop etishda ishlatiladi, garchi ular Internet sahifalarida paydo bo'la boshlasa ham. Displeylar orasida, masalan, qora harf - birinchi bosma mashinalarning asl shriftlarini topishingiz mumkin.

Alfavitdan tashqari shriftlar (Dingbats)

Alfavitdan tashqari shriftlar- bu harflar umuman bo'lmagan, ammo belgilar va bezaklarni o'z ichiga olgan shriftlar.

Proportsional va bir xil masofali

Proportsional shriftlarda belgi tabiiy imlo talab qiladigan darajada joy egallaydi. Masalan, Times New Roman - bu proportsional shrift. Ammo monospace shriftlari bir xil kenglikdagi barcha belgilarga ega. Bunday shriftlarga, masalan, Courier New kiradi

Kayfiyat

Shriftning kayfiyati uni ma'lum bir vaziyatda ishlatish to'g'ri yoki yo'qligiga katta ta'sir qiladi. Kontrastlar ham tez-tez ishlatiladi - biznes uslubi norasmiy, engil va dramatik bilan birlashtirilgan. Masalan, Times New Roman qattiq shrift bo'lib, u tez-tez ishlatiladi ish yozishmalar. Ammo, masalan, Helvetica odatda atrofdagi shriftlarga qarab o'z kayfiyatini o'zgartiradi.

Qalinligi va uslubi

Shriftlarning qalinligi: engil, nozik, muntazam, o'rta, qalin, og'ir yoki qora.

Shriftning uchta uslubi mavjud - kursiv, qiya va kichik bosh harflar. Sarlavhalar uchun odatda kichik harflar ishlatiladi.

Kursiv va qiya bir-birini almashtirish mumkin, garchi ular turli xil uslublar bo'lsa-da. Oblique - oddiy shriftlarning qiya versiyasi. Uni olish uchun Photoshop-dagi Free Transform-distort funksiyasidan foydalaning. Ammo kursiv - bu shriftning qiya versiyasi uchun javobgar bo'lgan alohida belgilar to'plami.

Shrift tuzilishi

Har bir belgi boshqa shriftlar bilan qanday birlashishini aniqlash uchun ishlatilishi mumkin bo'lgan ma'lum xususiyatlar to'plamiga ega. Mana asosiylari:

Shrift chizig'i (asosiy chiziq)- matn joylashgan xayoliy chiziq. Ba'zan yumaloq shriftlar shrift chizig'idan biroz uzoqlashadi.

O'rtacha chiziq ko'pgina kichik harflarning balandligini bildiradi, odatda "x" harfining balandligi bilan belgilanadi. X-balandligi tushunchasi shu erdan keladi.

Bosh harflar qatori (Kap)- balandlik Bosh harf"A".

Yuqoridagi rasmda barcha harflarning uchta umumiy qismi ko'rsatilgan.

Asosiy zarba, Stem- har bir belgining asosiy vertikali, shu jumladan moyil.

Krossovka (bar)- shriftning gorizontal qismi

Oval (kosa)- shriftning yumaloq qismi.

Yuqori kengaytma (Ascender)- “d”, “h” va “b” kabi harflarning yopishib turgan qismi.

Descender- “p”, “q” va “f” kabi harflardan pastga qarab turgan qism

Seriflar- serif shriftlarining o'ziga xos xususiyati). Ba'zi shriftlarda ular ko'proq talaffuz qilinadi, boshqalarida esa kamroq talaffuz qilinadi.

Diafragma- “A”, “c” yoki “m” kabi ochiq belgilar uchun joyni bildiradi

Quloq bu yuqoridagi misoldagi "g" harfidagi kabi ramzga dekorativ qo'shimcha.

Birlashtiruvchi zarba (soch chizig'i) Bu serif shriftning eng nozik qismidir.

Krossovka - gorizontal chiziq, "A" va "H" belgilarida bo'lgani kabi.

Drop (Terminal)- ba'zi shrift belgilarini loyihalashda chiziqning yumaloq yoki oval (tomchi shaklidagi) uchi.

Loop faqat ba'zi kichik "g" harflarida uchraydi va butunlay yopiq yoki qisman yopiq bo'lishi mumkin.

Shpor- "G" kabi ba'zi harflarda kichik taxallus.

Ulanish (havola) yuqori qismini bog'laydi va pastki qismi"g" harflari.

Orqa miya- "s" harfi joylashgan markaziy egri chiziq.

Quyruq harflari (dum)- dekorativ chiziq, masalan, "R" yoki "Q" harflarida.

Yakuniy element (terminal, yakuniy)- insult serifsiz tugaydi

Yelka- asosiy zarbadan cho'zilgan yumaloq chiziq. (to'g'risini aytsam, ko'pgina rus saytlari ushbu kontseptsiyaga mutlaqo boshqacha ta'rif beradi)

Muallifdan: Assalomu alaykum, do'stlar! Biz professional veb-dizaynning nozik tomonlarini o'rganishda davom etamiz va bugun bizda juda dolzarb mavzu - veb-tipografiya. Afsuski, ko'plab ishlab chiquvchilar ushbu sohaning asoslari va qoidalarini ham bilishmaydi. Ehtimol, ular shunchaki bezovta qilmaydilar va vaqtni behuda sarflashni xohlamaydilar yoki ehtimol ular uning ma'nosini to'liq tushunmaydilar. Umuman olganda, mening maqsadim - veb-dizayndagi tipografiya asoslarning asosi ekanligini va busiz oldinga siljish juda qiyin bo'lishini sizga etkazishdir.

Tipografiya va xabar almashish

Har qanday Internet-resursning maqsadi axborot xabaridir maqsadli auditoriya. Sizning veb-saytingizga tashrif buyuruvchilar birinchi navbatda nimaga e'tibor berishadi? Albatta, matnda! (albatta, agar u tasodifiy reklama va juda ko'p ahmoqona bannerlar bilan tiqilib qolmagan bo'lsa). Loyihangizning muvaffaqiyati oxir-oqibat matnga va faqat matnga bog'liq bo'ladi.

Keling, tipografiya veb-dizaynga qanday ta'sir qilishini aniqlaylik.

Birinchidan, veb-resursning tasviri. Yuqori sifatli rivojlanish oddiy ko'z bilan ko'rinadi va siz saytda qancha vaqt qolishni xohlayotganingizni taxmin qilish uchun mega-mutaxassis bo'lishingiz shart emas. Egri, o'qib bo'lmaydigan matn tashrif buyuruvchi sizning havolangizni kirgandan keyin 10-15 soniyadan keyin tark etishining birinchi sababidir.

Ikkinchidan, veb-resursning o'ziga xosligi. Internet makonining jadal rivojlanishining bugungi sur'atida mutlaqo noyob kontentni topish shunchaki real bo'lmagan vazifa ekanligini hisobga olsak, sizning vazifangiz ushbu kontentni noyob tarzda taqdim etishdir. Raqobatchi saytlar jangida e'tibordan chetda qolmagan kishi har doim g'alaba qozonadi oddiy qoidalar ishlanmalar, lekin aksincha, ularni samarali qo'llaydi va maksimal foyda oladi.

Veb-dizaynda tipografiya asoslari

Veb-dizayndagi shriftlar

Tipografiya ichida veb-dizayn butunlay tabiiy qonun va qoidalarga ega. Shriftlardan boshlaylik. To'g'ri tanlov shriftlar asosan sizning rivojlanishingiz kontseptsiyasini aniqlaydi va resursning umumiy idrokiga ta'sir qiladi.

Hatto yaqin o'tmishda ham, o'sha vaqtlar haqida kam narsa ma'lum bo'lsa-da, dizaynerlar faqat operatsion tizim bilan birga kelgan shriftlardan foydalanishlari mumkin edi. Barcha ajoyib versiyalar tasvir yoki fleshdan boshqa narsa emas edi. Vaqtinchalik echimlar bor edi, lekin ular juda ko'p muammolarni keltirib chiqardi.

@font-face CSS xususiyatining kiritilishi shunchaki dizaynerlarning qo'llarini bo'shatdi. Men har qanday shrift fayliga havolani ro'yxatdan o'tkazdim va endi u allaqachon sayt sahifalarida ishlatilgan. Ishlab chiquvchilar tomonidan ushbu mavzudan norozilik bor, ammo bu butunlay hal qilinadigan muammo bo'lib chiqdi.

Shuni ta'kidlash kerakki, barcha shriftlar malakali veb-dizayn uchun mos emas. Asosan ularning o'qilmasligi va ekrandan ko'rish qiyinligi tufayli. Ba'zi shriftlar juda og'ir va resurslarni sekinlashtiradi - bunga e'tibor bering. Men ko'proq qo'shaman texnik xususiyat shriftlar bilan ishlashda: ularni ko'rsatish turli xil brauzerlar- faylni yoki hatto butun oilani qayta ishlash muammosi mavjud.

Makro va mikro tipografiya

Siz ushbu atamalarning nomlaridan allaqachon tushunganingizdek:

so'l daraja - quradi umumiy tuzilishi matn, dizaynga nisbatan tarkibni joylashtirishni belgilaydi;

mikro daraja - eng kichik detallarga, bo'shliqlarga, oraliqlarga, chuqurchalarga va hokazolarga e'tibor beradi.

Makrotipografiyaning vazifasi globaldir - matn bloklarini jonli, faol, lekin ayni paytda uyg'un va integral qilish. Mikrotipografiya oddiyroq, ammo muhimroq vazifaga ega - o'qishni ta'minlash. Internetda ushbu muammolarni muvaffaqiyatli va muvaffaqiyatsiz hal qilishning ko'plab misollari mavjud.

Yaxlit kompozitsiyani qurish, birinchi navbatda, makonni tushunishda yotadi. Veb-dizayner butun rasmni ko'rishi kerak, lekin shu bilan birga uni tafsilotlarga to'liq ajratishi kerak. Bu erda ahamiyatsiz elementlar yo'q: sarlavha, paragraf, elementlar orasidagi vertikal masofalar, registrlar, qalinlik ...

Veb-dizayn uchun shriftlarni nisbiy birliklarda (% yoki "em") belgilash tavsiya etiladi, bu tarkibning moslashuvchanligi va moslashuvchanligini ta'minlaydi. Ekran o'lchami o'zgarganda bloklar harakatlansa, lekin shrift barqaror bo'lib qolsa, javob bermaydigan konteynerlar uchun ko'proq tanish "px" piksellardan foydalanish mantiqan.

Matnni bezash

Tipografiyaning muhim bo'limi bu kompyuterning ramziy terishidir. Bunga quyidagilar kiradi: tinish belgilarini qo'yish, qavs, defis va tire, nuqta, bo'shliq va boshqalarni qo'llash.

Bunday xatolar, birinchi qarashda, kontentning mazmuni yoki o'ziga xosligi uchun alohida xavf tug'dirmaydi, ammo esda tuting: hech qanday o'z-o'zini hurmat qiladigan manba matnlardagi ibtidoiy xatolarga yo'l qo'ymaydi. Tasvir haqida unutmang, unda hech qanday arzimas narsa yo'q!

Endi tartib haqida. Bu erda qoidalar mavjud:

Matn bloki sahifa kengligining 40-50% gacha cheklanishi kerak.

Paragraflar orasida 1,5 oraliq bo'lishi kerak.

Fon va matn o'rtasidagi kontrast 75-90% oralig'ida bo'lishi kerak.

Ko'zlar uchun qulay bo'lgan shrift 12-16 piksel, lekin hatto eng kichik blok 10 pikseldan kam bo'lmasligi kerak.

Satr oralig'i shrift o'lchamiga nisbatan saqlanadi va foiz sifatida o'lchanadi; ideal holda, 140-150% etarli bo'ladi.

Matnni markazlashtirilgan yoki asosli tekislash juda yomon shakl hisoblanadi. So'zlar orasidagi yirtiq bo'shliqlar, shuningdek, paragraflarning yirtiq qirralari idrokni pasaytiradi va ko'pincha shunchaki bezovta qiladi.

CSS uslublari

CSS uslubi veb-dizayndagi shriftlar bilan ishlash vositasidir. Rivojlanishdan CSS uslublari har qanday o'quv kursi boshlanadi. Ular nima uchun kerak? Resursning barcha tipografiyasini umumlashtirish uchun! CSS sahifalar va bloklarni bir butunga birlashtiradi va asosiy kursdan har qanday og'ishlarni nazorat qiladi. Siz tushunganingizdek, bitta g'oya etarli emas, uni amalga oshirish uchun sizga bilim va ko'nikmalar kerak bo'ladi.

Men bir marta ajoyib maqolada veb-dizayn 95% tipografiya ekanligini o'qidim. Bunga ishonish yoki ishonmaslik, har kim o'zi qaror qiladi. Ammo o'qib bo'lmaydigan matn maqsadsiz mahsulotdir. Sizga maslahatim shuki, ma'lumotni etkazib berish sifatiga darhol e'tibor berishni boshlang, uni kechiktirmang. Men uchun hammasi shu. Yangilanishlarga obuna bo'ling va siz eng qiziqarli narsalarni o'tkazib yubormaysiz! Hayr hayr!

Har qanday chalkashliklarni bartaraf etish uchun ba'zi asosiy atamalarning ma'nosini aniqlab olish kerak. Birinchi muhim to'plam kalit so'zlar“shrift” va “shrift” tushunchalarini aniqlang.

Shrift - bu ma'lum hajm va dizayndagi belgilar to'plami. Shrift uslubi ham xuddi shunday shrift uslublarini belgilaydi. Masalan, bular serif, sans serif, qo'lda yozilgan, displey, monospace va boshqalar bo'lishi mumkin. Aytishimiz mumkinki, shrift - bu umumiy ijro uslubi bilan birlashtirilgan turli xil uslub va o'lchamdagi shriftlar to'plami. Ko'rib turganingizdek, shrift torroq tushunchadir.

Veb-sahifa tartibini yaratishda shriftni tanlash juda muhimdir. Tabiiyki, standart shriftlardan foydalanish yaxshidir Windows to'plami yoki Mac. Ammo ba'zida bu to'plam dizaynerning g'oyasini hayotga tatbiq etish uchun etarli emas, keyin esa butun yuk maket dizaynerining yelkasiga tushadi. Baxtga, Google veb shriftlari bu muammoga juda oqlangan yechim taklif etadi.

Bundan tashqari, "og'irlik" va kerning kabi atamalar mavjud. Ularning barchasi yordamida o'zgartirilishi mumkin CSS vositalari va paragraflar, sarlavhalar yoki boshqa matn elementlariga qo'llanilishi mumkin. Shriftning "og'irlik" xususiyati yozilayotganda chiziqlarning qalinligi darajasini belgilaydi. Bu 100 dan 900 gacha bo'lgan qiymatlar seriyasidir, bu erda har bir raqam uslubning jasoratiga mos keladigan vaznni ko'rsatadi. Oddiy shrift "normal" 400 raqamiga, qalin "qalin" shrift 700 ga to'g'ri keladi. Kerning harflar orasidagi intervalni ularning shakliga qarab o'zgartirishdir. Bu ramzlarni to'g'ri joylashtirish, ular orasidagi masofalarni sozlash jarayoni bo'lib, buning natijasida uyg'unlikka erishish kerak. Garchi ko'p odamlar kerningga katta e'tibor bermasalar ham, bu juda yaxshi natijalarga erishishga yordam beradigan kichik narsalar.

Normlarni buzish

Yangi shriftlarni yaratish zarurligini muhokama qilish juda o'rinli. Orqada Yaqinda ko'pgina veb-saytlar eskirgan. Ular standart shriftlardan foydalanadilar, biz allaqachon charchaganmiz.

Bugungi kunda yuzlab shriftlar mavjud, ammo har xil OS o'z paketlarini taklif qiladi. Va bu paketlarga faqat bir nechta shriftlar kiritilgan. Agar siz tizimingizda kimdir bo'lmasligi mumkin bo'lgan shriftni tanlasangiz, shrift standart shrift bilan almashtiriladi. Shu sabablarga ko'ra asosiy shriftlardan foydalanish tavsiya etiladi. Ammo ba'zida asosiy shriftlar dizaynerning tasavvurini to'liq qamrab ololmaydi. Shuning uchun, agar siz dizayningiz uchun maxsus shrift kerakligiga qat'iy ishonsangiz, maxsus shriftingizni rasmga aylantirib, veb-saytingizga yuklashingiz mumkin. Sarlavhalar, sarlavhalar yoki menyular grafiklarini yarating va ulardan foydalaning.

Sarlavhalar sayt mavzulariga mos kelishiga ishonch hosil qiling. Bular turli xil ranglar, tagiga chizish, fon piktogrammalari yoki grafik matnni o'z ichiga olishi mumkin. Oxir oqibat, qaror sizniki.

Bundan tashqari, barcha matn havolalari saytda bir xil shriftga ega bo'lishini ta'minlashingiz kerak. Turli xil shriftlar va dizayndagi havolalardan foydalanish foydalanuvchi uchun navigatsiyada sezilarli qiyinchiliklarga olib keladi.

To'g'ri shriftni tanlash

Shuni ham ta'kidlash kerakki, turli xil shriftlar o'quvchilarning kayfiyatiga turli xil ta'sir ko'rsatishi mumkin. Umuman olganda, serif shriftlari bosma materiallar uchun ko'proq mos keladi. Seriflar harflar orasida bo'sh joy yaratishga yordam beradi va shuningdek, bir belgini boshqasidan ajratishga yordam beradi. Ko'pincha serif shriftlari shaxsiy his-tuyg'ularni beradi; ular hurmat, aql va professionallikni bildiradi.

Sans serif shriftlari veb-sahifalar uchun eng yaxshisidir. Past ekran o'lchamlari seriflarni loyqa ko'rinishga olib keladi va o'z navbatida ularni idrok etish qiyin. Sans serif shriftlari odatda ratsionallik, zamonaviylik, yoshlik va zamonaviylik tuyg'ularini ifodalaydi.

Misol uchun, seriflarni tanlash professionallik va nufuzli ma'lumot tuyg'usini beradi. Buni ko'pincha Nyu-York Tayms kabi asosiy ommaviy axborot vositalarida ko'rish mumkin. Kichikroq bloglar uchun siz katta chiziq balandligi bilan sans serif shriftidan foydalanishingiz mumkin. Bu foydalanuvchilarga blog matnini tezda ko'rish imkoniyatini beradi.

Siz har doim tashrif buyuruvchiga qanday ma'lumot bermoqchi ekanligingiz haqida o'ylashingiz kerak. Shriftni tanlayotganda, baxtli xabarlar engil, havodor va yumshoq shrift shakllari bilan birga bo'lishi kerakligini esdan chiqarmasligingiz kerak, Xellouin kabi qorong'i mavzularga ega xabarlar esa qattiqroq qirrali shriftlar bilan birga bo'lishi kerak.

O'qilishi

Tipografiya va ko'pincha o'qib bo'lmaydigan tipografiya ko'zni juda bezovta qilishi mumkin. Albatta, Funky yoki boshqa o'qib bo'lmaydigan shriftlardan foydalanish mumkin bo'lgan ba'zi istisnolar mavjud, masalan, tungi klublar reklamalari uchun.

Ammo, agar sizda, masalan, Soda, Bored yoki Akka dan foydalanish istagi bo'lsa, unda bu fikrdan voz kechish yaxshiroqdir. Agar istak hali ham etarlicha kuchli bo'lsa, unda bu shriftlardan kam foydalanish kerak. Masalan, sarlavha sifatida. Ammo keyin asosiy matn tushunarli bo'lishi kerak. Bu sizning saytingizda impuls yaratishga yordam beradi. Va shuni esda tutish kerakki, bunday shriftlardan foydalanish kamchilik emas, balki dizaynning afzalligi bo'lishi kerak.

Axborot tarkibi

Dizayn sizning xabaringizni to'ldirishi kerak. Foydalanuvchi dizayner aniq nimani nazarda tutganini aniqlashi shart emas. Noto'g'ri tipografiya tanlovi foydalanuvchining kompaniya va uning xizmatlari haqida noto'g'ri tushunchasiga hissa qo'shishi mumkin.

Biznes loyihalarini loyihalashda siz asosan an'anaviy silliq shriftlardan foydalanishingiz kerak. Agar sizda rasmiy dizayn bo'lmasa, buni ham hisobga olish kerak. Ayniqsa, odamlar sizning saytingizga jiddiy qarashlarini istasangiz.

Joylashtirish va o'lchamlar

Samarali dizayn uchun juda muhim - matn qaysi joylarda joylashtirilishi va uning hajmi qanday bo'lishi kerak. Hech kim ma'lumotni o'qish yoki veb-saytdagi ajoyib so'zlarni ko'rish uchun ko'zlarini zo'rlashni xohlamaydi. Yaxshi dizaynning maqsadi muvozanatni topishdir. Va buning uchun birinchi qadam qaysi ma'lumotlar muhimroq bo'lishini aniqlashdir.

Odatda, siz e'tibor bermoqchi bo'lgan so'zlar biroz ko'proq bajarilishi kerak. Yoki aksincha - kichiklar kichikroq bo'lishi kerak. Hammasi muhimlikka bog'liq. Boshqacha qilib aytganda, siz so'zlar ierarxiyasini yaratishingiz kerak.

Shriftni joylashtirish haqida gap ketganda, uni muvozanatli saqlashga harakat qiling. Matn qismlarini to'rtta burchakka sochishga hojat yo'q. Bu foydalanuvchilarni sezilarli darajada chalg'itishi mumkin.

Rang

Bu eng oson jihatlardan biridir. Matnni fondan ajratib turadigan va o'qilishi mumkin bo'lgan rangni tanlashingiz kerak.

Sizning yordamchilaringiz kontrast ranglar bo'ladi, shuningdek, zarbalar (zarba) va porlash (porlash) kabi effektlardan foydalanish. Bu saytni yanada jozibali va o'qishni osonlashtirishga yordam beradi. Siz odamlarni to'xtab, qarashga majbur qiladigan rangni tanlashingiz va ma'lumotni dizaynning asosiy qismiga aylantirishingiz kerak.

Xulosa

Photoshop-da shriftlardan foydalanish ularni veb-sahifalarda ishlatishdan sezilarli darajada farq qiladi. Bu nima uchun ba'zi dizaynerlar tipografiya bilan ishlash qiyinligini tushuntiradi. Internetdagi tipografiya juda keng mavzu bo'lib, ko'p izlanishlarni talab qiladi. Siz har doim esda tutishingiz kerakki, dizaynning kayfiyati va estetikasiga mos keladigan tipografiyadan foydalanishga yondashuvni topish juda muhim. Aralashtirishdan qo'rqmang Har xil turlar shriftlar, faqat ular yaxshi ekanligiga ishonch hosil qiling.

Do'stlar!

Ushbu maqolada men tajribasiz dizaynerlarning eng keng tarqalgan xatolarini tahlil qilishni davom ettiraman.

Bugun biz shriftlardan foydalanish haqida gaplashamiz. Yangi boshlanuvchining ishini professionaldan qanday ajratishim mumkinligini bilasizmi? Yangi boshlovchi, qoida tariqasida, o'z ishida o'rgangan hamma narsani ko'rsatishga harakat qiladi. Bu bir xil asarda turli xil ranglar, turli effektlar va, albatta, ko'plab shriftlardan ko'p foydalanishda namoyon bo'ladi. Professional dizayner, aksincha, odatda bitta loyiha doirasida bitta yoki ko'pi bilan ikkita shriftdan, shuningdek, cheklangan ranglar palitrasidan foydalanadi. Va agar u grafik effektlarsiz mutlaqo qila olmasa, u ulardan foydalanishni minimal darajaga tushirishga harakat qiladi.

Shunday qilib, agar yaxshi dizayn uchun birinchi raqamli qoida qurilish bo'lsa modulli tarmoq(maqolaga qarang), keyin ikkinchi qoida: shriftlar sonini cheklang!

Shriftlarning minimal soni dizayndagi muvofiqlik va izchillikni ta'minlaydi. Sizning ishingiz turli uslublarni o'z ichiga olgan va ranglar va shriftlar bilan to'ldirilganligi qanchalik kam bo'lsa, shunchalik mazmunli va professional ko'rinadi.

Ko'pincha dizayner loyiha uchun bitta shriftni tanlaydi. Bundan tashqari, tanlangan shriftning xarakteri ijodiy g'oyaga yoki dizaynning kayfiyatiga mos kelishi kerak. Misol uchun, agar biz bag'ishlangan buklet tayyorlayotgan bo'lsak Mobil telefon uchinchi avlod, keyin engil, zamonaviy sans-serif shrifti bizga mos keladi. Ammo Ermitajdagi impressionistlar ko'rgazmasi mavzusiga bag'ishlangan buklet klassik, "barqaror" serif shriftiga ko'proq mos keladi. Umuman olganda, shriftlarni muvaffaqiyatli tanlash dizayner ishida juda muhimdir, chunki shrift tabiati bilan loyiha g'oyasi va tabiati o'rtasidagi nomuvofiqlik butun ishni buzishi mumkin.

Ba'zan qo'shimcha shriftdan foydalanish kerak bo'ladi. Ikkita shrift bilan ishlaganda birinchi shrift asarning kayfiyati va xarakterini ta'kidlagandek ko'rinadi va ko'pincha unga individuallik beradi. Ushbu shrift sarlavhalar va sarlavhalar uchun ishlatiladi. Ba'zan dizaynerlar bu maqsadda noodatiy shriftlardan foydalanadilar. Bu o'ziga xoslik uchun emas, balki ikkinchi, ko'proq tanish shriftga nisbatan kontrastni oshirish orqali matnning muayyan qismlarini ajratib ko'rsatish maqsadida amalga oshiriladi.

Bitta asarda unchalik ko'p sarlavha mavjud emasligi sababli, kontrast printsipi mukammal ishlaydi, ayniqsa sarlavhalar asosiy matndan ancha katta.

Ikkinchi shrift, qoida tariqasida, ko'zga ko'proq tanish va uning vazifasi tomoshabinlar e'tiborini jalb qilish emas, balki sof ma'lumot beruvchi funktsiyani bajarishdir. O'qish oson va ko'zingizni charchatmasligi kerak. Yangi boshlanuvchilar ko'pincha ekstravagant, o'qish qiyin bo'lgan shriftda katta matn qismlarini yaratishda jiddiy xatoga yo'l qo'yishadi. Shuningdek, men bunday shriftlar sifatida "qo'lda yozilgan" shriftlarning katta qismini o'z ichiga olaman. Bunday shriftlar, aytaylik, kichik tabriknoma uchun yaxshi, lekin u bilan ishlash uchun emas katta miqdor matn.


Shriftdan yaxshi foydalanishga misollar:




Ko'rib turganingizdek, bu erda faqat ikkita shrift qo'llaniladi. Biri sarlavhalar uchun, ikkinchisi esa asosiy matn uchun. Bu ish oqlangan va izchil ko'rinadi.


Shriftlardan noto'g'ri foydalanish:




Bu erda men ushbu dizaynning nomutanosibligini va nomuvofiqligini his qilish uchun ataylab ba'zi noodatiy shriftlardan foydalanaman. Ishingizda juda ko'p shriftlardan foydalanmang! 8 xil shrift aralashgan va ayniqsa ekstravagant va o'qish qiyin shriftlar bo'lgan ishdan yomonroq narsa yo'q.

Mana shunday ishning namunasi:


Bu mening tasavvurimning mahsuloti emas. Men bunday ishlarni ko'p ko'rdim va ular, qoida tariqasida, yangi boshlanuvchilar yoki havaskorlar tomonidan bajarilgan.

Dizayn darsligini ko'rib chiqsangiz, sarlavhalar uchun sans serif shrifti va asosiy matn uchun serif shriftidan foydalanish bo'yicha tavsiyalarni topishingiz mumkin.

Ammo bu qoida juda umumiy va amalda uni ko'pincha chetlab o'tish kerak.
Shunday qilib, nihoyat, yana bir maslahat. Agar sarlavha shrifti zamonaviy ko'rinsa, unda asosiy shrift sifatida sans-serif shriftini tanlash yaxshidir. Agar sizning birinchi shriftingiz eski uslubda bo'lsa, unda asosiy shrift serif bo'lishi kerak.

Shriftlardan foydalanish mavzusi bitmas-tuganmas, shuning uchun bitta kichik maqolada hamma narsa haqida gapirish mumkin emas. Iloji bo'lsa, shriftlar bilan ishlash bo'yicha bilimlarimni siz bilan baham ko'raman. Aytgancha, mening InDesign o'quv kursi, Men ushbu muhim mavzuga katta e'tibor beraman.