O'zgaruvchan shriftlar bilan tipografiyaning evolyutsiyasi: kirish

Yupqa, qalin va ularning orasidagi narsalar: FF Meta Monotipdan o'zgaruvchan

So'zlar kuchga ega va tipografiya ularning ovozidir

Asrlar davomida, biz o'qigan narsalarimizni "eshitishimiz" turi. Odatda, harflar va tipografiya brendlash, ifoda etish, vokal diapazonining asosiy elementi ekani tushunarli. Ajoyib tipografiya tushunishga, kayfiyatga va ma'noga cheksiz ta'sir qiladi va dizaynning ajralmas qismidir. Afsuski, Internet paydo bo'lganidan beri ko'p yillar davomida biz onlayn tarkibga tipografik dizaynning eng asosiylaridan tashqari barchasini qo'llay olmadik. Haqiqiy shriftlar va OpenType funktsiyalaridan foydalanish imkoniyati bilan - ligature, aniq raqamlar to'plamlari, kasrlar va haqiqiy kerning - tipografik manzara juda yaxshilandi. Ammo veb-kontentni ko'rish haqiqati shuni ko'rsatadiki, tezlik dizaynning eng muhim jihati - shuning uchun biz sahifa tezligi uchun tipografik "vokal diapazoni" ni sotdik. Bu shunchaki shrift og'irligi kamligini va brendning sadoqati va ovozini pasayishini anglatadi.

Ko'plardan, bittasi (paradigma: siljigan)

O'zgaruvchan shrift - bu shuncha ko'p ishlaydigan bitta shrift
- Jon Gudson

O'zgaruvchan shriftlarning kelishi butun dinamikani o'zgartiradi. Djon Hudson ta'kidlaganidek, o'zgaruvchan shrift bitta shrift bo'lib, u shunchalik ko'p ishlaydi: kenglik va vazn, egri va hatto kursivning barcha o'zgarishlari bitta, yuqori samarali va siqiladigan shrift faylida bo'lishi mumkin. Yana bir narsa: format (texnik jihatdan OpenType 1.8 spetsifikatsiyasining bir qismi) to'liq kengaytirilishi mumkin. Turi dizayneri qanday eksa ishlatilishini, ularning diapazonlarini va hatto yangi o'qlarning ta'rifini to'liq nazorat qiladi. Hozirda 5 ta "ro'yxatdan o'tgan" o'qlar mavjud (kenglik, vazn, kesik, kursiv va optik o'lcham), ammo dizayner istagan o'qlarini farq qilishi mumkin. Ba'zi misollar ko'taruvchilar va avlodlarning balandligi, matn darajasi, hatto serif shakli. Imkoniyatlar deyarli cheksizdir. Ishlash to'sig'ini olib tashlab, biz yanada qiziqarli va dinamik dizayni va brendning haqiqiy ovozini ifoda etish uchun ko'proq imkoniyatlarni ochamiz. Bularning barchasi yozuv maydonining o'ziga sodiqlikni saqlab turganda: faqat tur dizayneri ta'sir qiladigan baltalar o'zgarishi mumkin. Sun'iy buzilishlarga yo'l qo'yilmaydi.

Veb-dizayn, ixtiro qilindi

Texnologiya hanuz kamolotga etayotgan va dizaynerlar ushbu yangi ishlash usulida yanada ravonroq bo'lishga harakat qilmoqdalar, ammo Internetdagi dizaynga oid va'dalar puchga chiqmoqda. Odatda, stsenariy har qanday dizaynni 3-5 xil shriftlar bilan saytning dizayni tili va ovozini, shu jumladan tananing nusxasi va sarlavhalarini o'zgartirish uchun har qanday dizaynni cheklashdan iborat bo'ladi. O'zining sodda bajarilishida o'zgaruvchan shriftlar har bir sarlavha uchun har xil og'irliklardan foydalanish erkinligini beradi - bu ularning ravshanligi va o'qilishini sezilarli darajada oshiradi.

100 dan 900 gacha bo'lgan og'irliklar

Bundan tashqari, sarlavhalar yoki ma'lumotlarning zich ma'lumotlarini namoyish qilish uchun belgilarning kengliklaridan biroz torroq foydalanish mumkin. Aslida, butun tipografik tizim mutanosib ravishda ishlab chiqilishi mumkin: og'irlik va kenglik tananing nusxa ko'chirishning standart parametrlarida ko'paytiruvchiga aylanishi mumkin. Buni amalga oshirish ekran parametrlariga yoki foydalanuvchi xohishiga ko'ra o'zgarganda tananing nusxasi bilan birga ushbu jihatlarni osonlikcha kattalashtirishga imkon beradi. Bularning barchasi kamroq HTTP so'rovlari (shriftlarning kam fayllari) va yuklab olinadigan ma'lumotlarning umumiy tejalishi tufayli ishlashning o'sishi bilan birga keladi (lekin bu shrift va ishlatilgan siqishni bilan farq qiladi).

Ammo bu erkinliklar yanada aniqroq bo'lishimizga imkon beradi, ammo ba'zi qiziqarli imkoniyatlar o'qish tajribasini o'zgartirishga yordam beradi. Ushbu sahifa (shuningdek, haqiqiy demo sahifaning o'zi) FF Metaning yangi o'zgaruvchan shriftli versiyasi bilan o'rnatildi, Erik Spiekermann tomonidan 1991 yilda birinchi marta nashr etilgan klassik sans-serif dizayni. Ikkala tomonning ham o'zgaruvchanligi (og'irligi) faqat bitta o'q bilan bo'lsa ham. roman va kursiv variantlarida ovozning ajoyib doirasiga ishlashning katta yutuqlari bilan erishish mumkin: 18 ta fayl va 288k dan ortiq fayl 84 k hajmdagi bitta fayl bilan almashtirilgan.

Ekranda qayta o'qish boshlandi

[Meta] chiroyli ko'rinishdan tashqari, juda ko'p ishlashi kerak
- Erik Spikerman

Yaxshi o'qish tajribasini yaratishda ba'zi bir katta qiyinchiliklar mutanosiblik va nozik tafsilotlarning nafisligi bilan bog'liq. Zamonaviy CSS va OpenType xususiyatlari va o'zgarishlari kombinatsiyasi kuchli kombinatsiyani taqdim etadi. Tilga asoslangan ligatika va defisatsiya kabi funktsiyalarni o'rnatish, ekran o'lchamiga qarab defisatsiyani yoqish va o'chirish, hatto har bir satrda harflar hajmini kamaytirmasdan ko'proq belgi qo'shish uchun belgilar kengligini kichik ekranlarda moslashtirish, dramatik yaxshilanishlarni amalga oshirishi mumkin. o'qish tajribasining silliqligi va qulayligi.

Yaqinlashishga tayyor

18-asr Garamondning optik kattalikdagi kesimi. Birinchi rasm 6pt o'lchamda, ikkinchisi esa 72 o'lchamda. Bu kattaroq hajmda yanada aniqroq.

Metall ko'rinishida keng tarqalgan, ammo rasmlarni terishga va raqamli ko'rinishga o'tishda yo'qolgan yana bir xususiyat optik o'lchamdir (ba'zi dizaynerlar hanuzgacha turli poligonlar uchun alohida optik o'lchamlarni yaratmoqdalar, ammo bu kam va biroz cheklangan). Sans-serif dizaynida tez-tez uchrab turadigan narsa emas, lekin o'nlab yillar o'tgach (haqiqatan ham asrlar davomida), tipik makonning jismonan kichik o'lchamlari biroz og'irroq, aniqroq piyolalar va hisoblagichlar bilan kesish odatiy hol edi. ba'zi holatlarda o'qishni saqlab qolish uchun yanada keng diafragma mavjud. Xususan, gazetalar, chiziqlar yo'qolishi yoki harflar siyoh to'plashdan juda ko'p zarar ko'rmasligini ta'minlash uchun juda muhim deb bildi.

Optik o'lchov o'zgaruvchan shriftlarni qaytarishga imkon berdi va ular mavjud bo'lganda avtomatik ravishda qo'llanilishi yoki veb-dizayner yoki ishlab chiqaruvchi tomonidan aniq o'rnatilishi mumkin. Yuqorida ta'kidlab o'tilganidek, bu sans-serif tipdagi makonlarda shunchalik tez-tez uchrab turmaydi, ammo yuqori darajali kontrastli serif dizaynlarida bu juda dramatik effekt uchun ishlatilishi mumkin.

Polsha va poeziya

Yuqorida muhokama qilingan imtiyozlar bilan, o'zgaruvchan shriftlar uchun ish juda jozibador. Yaxshi tipografiya bu ajoyib dizayn uchun etarli emas. Kengligi va vazni kabi eksa diapazoni bizga juda ko'p sonli fayl aktivlarini yuklamasdan Internetda ko'proq tahririyat dizaynini o'zlashtirish uchun katta erkinlik beradi. Bizda ozgina talab qilinadigan o'zgaruvchan shriftlar mavjud bo'lganligi sababli, ularni nashr etuvchilarning o'zlari foydalanishi uchun ularni ochib berish imkoniyati mavjud. Veb-sayt joylashgan Kontent Boshqarish Tizimi (yoki CMS) ichidagi dizaynerlar uchun rolni tasavvur qiling. Ushbu dizayner CMS-ga o'rnatilgan ba'zi oddiy boshqaruvlarni ishlatishi mumkin, ular maxsus sarlavhalarni yoki tirnoqlarni terishga imkon beradi, har safar har safar maxsus kodni yozmasdan, yangi bosma nashrdagi kabi dizaynning yangi darajasiga imkon beradi.

Biz hali ham ushbu yangi davr boshida bo'lishimiz mumkin, ammo kelajak albatta porloq

2018 yil may holatiga ko'ra, 4 ta asosiy veb-brauzerdan 3tasi har ikkala dominant mobil platformadan tashqari o'zgaruvchan shriftlarni qo'llab-quvvatlamoqda (caniuse.com saytidagi qo'llab-quvvatlashni tekshiring). Shuni hisobga olib, biz bugungi kunda Internetni yoritishga tayyormiz.

CodePen-ning to'liq sahifasi. Barchasini birgalikda ko'rib chiqing va CSS-ga diqqat bilan qarang. Bunga men Jen Simmons va Tim Braundan o'rgangan ba'zi fikrlar asosida yaratgan miqyosli tipografik tizim, ko'rish maydonchalari, CSS-ning o'ziga xos xususiyatlari (aka o'zgaruvchilar) va ko'plab hisob-kitoblardan foydalanish kiradi. Siz uni CodePen-da to'g'ridan-to'g'ri ko'rishingiz yoki uni quyida o'rnatilganidan tekshirishingiz mumkin.

Yozuv va loyiha haqida ba'zi fikrlar

Men har doim Erik Spiekermanning ishini yaxshi ko'rar edim va o'ylaymanki, Meta, Officina va Firaning xronologiyasi va tarixi haqiqatan ham qiziq va men uchun so'nggi 25 yil ichida raqamli dizayn matolarining juda ko'p qismi. Dizayn olamida bunday tarixga va ta'sirga ega bo'lgan yozuvni olish va u bilan yangi texnologiya kontekstida ishlash imkoniyatlari juda hayajonli edi. Men bir xil faylning bir qismi sifatida og'irlik va kursiv bilan ishlashni yaxshi ko'rganim uchun juda minnatdorman: u o'zgaruvchan shrift formatining qiymatini juda yaxshi namoyish etadi.

Men maqolani o'zi yozmaguncha sahifani loyihalashni boshlamaslikka qaror qildim. Dizaynerlar va brend egalariga o'zgaruvchan shriftlarning afzalliklari bilan ularni tashvishlariga mos keladigan atamalar bilan tanishtirish uchun yaxshi tanishishni yozmoqchi edim: dizayn tili va brendning ifodasi. Yaxshi qoralama borligini his qilganimdan so'ng, yozuv matonatining o'ziga va dizayn lug'atimizdagi o'rniga biroz ko'proq aniqlik kiritdim. Bu menga harfni va tarixni qanday namoyish etish haqida ba'zi fikrlarni berdi.

Dastlabki terish haqida o'ylayotib, men o'lchovga o'tdim: men vazn va o'lchamning haddan tashqari balandligi bilan Internetda tez-tez ko'rinmaydigan tarzda o'ynashni xohlardim, chunki ishlatilgan vaznlarda ko'proq dizayn mavjudligi sababli. Bu holda men 100 dan 900 gacha bo'lgan har xil vaznlarni roman va kursivda ishlatganman. Menga yoqqan maketni olishni boshlaganimdan so'ng, menga qobiliyatlarni tasvirlash uchun grafikalar qilish o'rniga rasmlarni turdan tashqari: qiziq tirnoqlarni va bir oz "infografik" uslubdagi shrift ma'lumotlarini yaratish qiziqroq bo'lib tuyuldi.

Amper va tepaning yuqoriga oxirgi tegishi aslida FontFont saytidagi namunalar sahifasi orqali ilhomlantirilgan: bir-birining ustiga yotqizilgan amperlarning barcha og'irliklarini ko'rsatadigan glif namunasi mavjud. Dastlab men ularning barchasini bir xil tarzda yig'ilgan edim, bunda harakatlanuvchi animatsiya mavjud edi, ammo bu ba'zi bir o'zgaruvchan shrift va keyframe animatsiyasini amalga oshirayotgan ba'zi brauzerlar uchun juda katta edi. Men bir-birining ustiga chiqish tartibini o'ynash / to'xtatib turish variantiga urganimda, ularning tarqalish uslubi menga yoqdi (ayniqsa mobil telefonlarda). Shunday qilib, men uni aylantirdim va u statik holda boshlangan bo'lsa, so'ngra animatsiyani bir marta o'ynatib, yoyilgan / qatlamli sxemaga qayting.

Umuman olganda, men ham tarkib, ham dizayndan mamnunman, va u ekranning turli o'lchamlarida qanday o'zgarishi va o'zgarishi kabi. Umid qilamanki, bu boshqalar uchun ham ilhom va ibrat bo'lib xizmat qiladi.

[Monotype yaqinda klassik Erik Spiekermann dizayni FF Metaning yangi o'zgaruvchan shrift versiyasini namoyish etish uchun namoyish sahifasini yozish va loyihalashtirishga meni jalb qildi. Bu sahifaning matni va ba'zi ingl. To'liq jonli sahifa CodePen-da joylashtirilgan va yuqorida o'rnatilgan. Hamma uchun ochiq, shuning uchun nusxa olib, o'zingiz bilan o'ynang. Ularning texnologiyaga kirishini ham ko'rishingiz mumkin.]

Mening blogimda asl tarkib