A tipográfia fejlődése változó betűtípusokkal: bevezetés

Vékony, vastag és minden, ami közt van: FF Meta Variable a Monotype-tól

A szavaknak hatalma van, és a tipográfia a hangjuk

Az évszázadok óta írja, hogyan „halljuk” azt, amit olvasunk. Általában is érthető, hogy a betűtípusok és a tipográfia a márkaépítés, a kifejezés és a vokális tartomány alapvető eleme. A nagy tipográfia számtalan módon befolyásolja a megértést, a hangulatot és a jelentést, és a formatervezés alapvető része. Sajnos az internetes megjelenés után sok éven át nem tudtunk a tipográfiai tervezés minden elemet alkalmazni az online tartalomra. A valódi betűtípusok és az OpenType funkciók - például ligációk, speciális ábrakészletek, frakciók és valódi kerning - használatának lehetősége révén a tipográfiai táj rendkívül javult. Az interneten való tartalommegtekintés viszont azt sugallja, hogy a sebesség a formatervezés legkritikusabb eleme - tehát tipográfiai „énektartományt” cseréltünk az oldalsebességre. Ez azt jelenti, hogy kevesebb a betűkészlet és csökken a márka hűsége és a hangja.

Sokan közül egyet (paradigma: eltolt)

A változó betűtípus egy olyan betűtípus, amely annyi működik
- John Hudson

A változó betűtípus megjelenése megváltoztatja az egész dinamikát. Ahogyan azt John Hudson leírja, a változó betűtípus egyetlen betűtípus, amely annyira működik: a szélesség és súly minden variációja, a ferde és még dőlt betű is szerepelhet egyetlen, nagyon hatékony és tömöríthető betűkészlet-fájlban. Mi több: a formátum (amely műszakilag része az OpenType 1.8 specifikációnak) teljesen kibővíthető. A típustervezõ teljes mértékben irányíthatja a használt tengelyeket, azok tartományát és még az új tengelyek meghatározását is. Jelenleg 5 „regisztrált” tengely van (szélesség, súly, ferde, dőlt és optikai méret), de a tervező bármilyen tengelyt megváltoztathat. Néhány példa a felemelkedők és leszállók magassága, szövegminőség, sőt a serif alakja. A lehetőségek szinte korlátlanok. A teljesítmény akadályának eltávolításával megnyitjuk az ajtót az érdekesebb és dinamikusabb tervezés, valamint a márka valódi hangjának kifejező képességének sokkal nagyobb képessége érdekében. Mindezt, miközben fenntartja magának a betűtípusnak a hűségét: csak a típustervező által kitett tengelyek változtathatók. Nem megengedett a mesterséges torzítás.

Újra feltalált webdesign

Míg a technológia még érett, és a típustervezők azon dolgoznak, hogy folyékonyabban váljanak ezen új munkamódszerekkel szemben, a weben történő tervezés ígéretét úttörő jelentőségű. A tipikus forgatókönyv az, hogy az adott mintát 3–5 betűkészletre korlátozzák, hogy a webhely tervezési nyelvének és hangjának minden szempontját ábrázolják - ideértve a testmásolatok és a fejlécek minden permutációját. A legegyszerűbb megvalósításnál a változó betűtípusok szabadságot adnának számunkra, hogy a címsorok minden szintjén különböző súlyokat használjunk - ezáltal jelentősen növelhető azok áttekinthetősége és olvashatósága.

100 - 900 súly igényelhető

Használhatunk kissé szűkebb karakterszélességet a címsorokhoz vagy az adatok sűrű megjelenítéséhez is. Valójában az egész tipográfiai rendszert úgy tervezhetik, hogy arányos legyen: a súly és a szélesség szorzóvá válhat a szokásos másolat-beállításokban. Ezzel a szempontok könnyen méretezhetők a test másolatával együtt, ha annak beállításai a képernyő mérete vagy a felhasználói preferencia alapján változnak. Mindez a teljesítmény növelésével, a kevesebb HTTP-kérés (kevesebb betűkészlet-fájl) és a letölthető adatok általános megtakarításának köszönhetően (bár ez függ a betűtípustól és a használt tömörítéstől).

De bár ezek a szabadságok lehetővé teszik számunkra, hogy kifejezőbbé váljunk, az igazán érdekes képességek némelyike ​​elősegíti magának az olvasásnak az átélését. Ezt az oldalt (nos, a tényleges demonstrációs oldal) az FF Meta új változó betűtípusú változatával állítottuk be, az Erik Spiekermann klasszikus sans-serif tervezésével, amelyet 1991-ben adtak elő. Még mindkettőnek csak egy változata (súlya) Római és dőlt változat, a hangok csodálatos tartományát érhetjük el hatalmas teljesítménynövekedéssel: 18 fájl és 288 feletti fájl helyett egyetlen, csak 84k méretű fájl.

Újraolvasott olvasás a képernyőn

A [Meta] -nak nem csupán szépnek kell lennie: elég keményen kell dolgoznia
—Erik Spiekermann

A jó olvasási élmény megteremtésekor a legnagyobb kihívás az arányosság és a részletek finomságának hiánya. A modern CSS és az OpenType szolgáltatások és variációk kombinációja hatékony kombinációt jelent. Az a képesség, hogy nyelveken alapuló funkciókat állíthat be, mint például a ligatúrák és elválasztások, elválaszthatja és bekapcsolhatja a elválasztást a képernyő mérete alapján, és még a legkisebb képernyőkön is megadhatja a karakter szélességét, hogy soronként több karaktert illeszthessen a betűméret csökkentése nélkül, és drámai fejlesztéseket hozhat az olvasási élmény sima és kényelmesebb.

Készen áll a közeli felvételre

A Garamond 18. századi vágása optikai méretben. Az első kép 6pt méretű, a második 72. mérete. Vegye figyelembe a stroke kontrasztjának különbségét. A nagyobb méretben sokkal kifinomultabb.

Egy másik olyan jellemző, amely a fém típusban gyakori, de a fotószerkesztés és a digitális fordításban elvesztette az optikai méretezést (nos, egyes tervezők mégis különféle optikai méreteket hoznak létre a különböző tartományokhoz, de ez ritka és kissé korlátozott). Nem olyan gyakran, mint a sans-serif mintákon, de az elmúlt évtizedekben (az igazság az évszázadok óta) eléggé gyakori volt, hogy a betűtípus fizikailag kisebb méretét kissé nehezebb ütésekkel, nyitottabb tálakkal és pultokkal vágták, és egyes esetekben még szélesebb nyílások is vannak az olvashatóság megőrzése érdekében. Különösen az újságok találták ezt kritikus fontosságúnak annak biztosítása érdekében, hogy a sorok ne veszjenek el, vagy a levelek ne szenvedjenek túl nagy mértékben a tintagyarapodástól.

Az optikai méret változtatott betűtípusokkal tér vissza, és automatikusan alkalmazható, ha elérhető, vagy a webdesigner vagy a fejlesztő kifejezetten beállíthatja. Mint említettem, ez a sans-serif betűtípusokban nem olyan gyakori jellemző, mint ez, de felhasználható a drámai hatásokra a magasabb löketű kontrasztú szerif mintáknál.

Lengyel és kedves

A már tárgyalt előnyökkel kapcsolatban a változó betűkészletek esetében ez elég vonzó. De a jó tipográfia nem csak a nagyszerű dizájn. Az olyan tengely-tartomány, mint a szélesség és a súly, óriási szabadságot biztosít számunkra, hogy átvegyünk több szerkesztői formátumot az interneten anélkül, hogy túl nagy számú fájltartalmat kellene betöltenie. És mivel már van a kevés szükséges változó betűkészlet a helyén, akkor lehetőségünk van arra, hogy ezeket a tartalomkiadók számára is felhasználhassuk. Képzelje el a tervezők szerepét a tartalomkezelő rendszerben (vagy CMS), ahol a webhely található. Ez a tervező felhasználhatott néhány egyszerű vezérlőt, amely beépült a CMS-be, és lehetővé teszi számukra, hogy speciális címsorokat vagy húzó idézeteket írjanak be, lehetővé téve egy teljesen új tervezési szintet, hasonlóan a nyomtatotthoz, anélkül, hogy minden alkalommal egyedi kódot kellene írni.

Lehet, hogy még ezen az új korszak hajnalán vagyunk, de a jövője minden bizonnyal fényes

2018. májusától a négy fő böngésző közül három már támogatja a változó betűkészleteket, mindkét domináns mobilplatform mellett (ellenőrizze a caniuse.com támogatását). Ezt szem előtt tartva, ma már készen állunk az internetes világítás megkezdésére.

Itt található a CodePen teljes oldala. Vessen egy pillantást az egészre, és nézzen bele a CSS-hez, amely azt vezérli. Ez magában foglalja a méretezési tipográfiai rendszert, amelyet néhány Jen Simmons-tól és Tim Brown-től tanultam elképzeléseim alapján hoztam létre, nézetablak-egységek, CSS egyedi tulajdonságok (más néven változók) és sok számítás felhasználásával. Megtekintheti közvetlenül a CodePen webhelyen, vagy megnézheti az alább beágyazva.

Néhány gondolat a betűtípusról és a projektről

Mindig rajongtam Erik Spiekermann munkájának, és azt hiszem, hogy a Meta, Officina és a Fira kronológiája és története valóban érdekes, és számomra a digitális tervezés szövetének része az elmúlt 25 évben. Nagyon izgalmas volt az a lehetőség, hogy betűtípust szerezzen az ilyen történelemmel és a formavilággal kapcsolatban, és vele együtt dolgozzon egy vadonatúj technológia összefüggésében. Különösen nagyra értékeltem, hogy ugyanazon fájl részeként dolgozhatunk mind súlyokkal, mind dőlt betűkkel: ez nagyon jól bemutatja a változó betűkészlet értékét.

Úgy döntöttem, hogy még az oldal tervezését sem kezdtem el, amíg maga nem írta meg a cikket. Jó bevezetést akartam írni a tervezőknek és a márkatulajdonosoknak annak érdekében, hogy bemutassam őket a változó betűtípusok előnyeihez, azok vonatkozásában: a tervezési nyelv és a márka kifejezése. Miután úgy éreztem, hogy jó vázlatom van, egy kicsit specifikusabban hozzáadtam maga a betűtípust és annak helyét a tervezési lexikonban. Ez ötleteket adott nekem arról, hogy miként lehet bemutatni a betűtípust és az előzményeket.

Az alapszövegkészítésre gondolkodva méretarányosan gondolkodtam: olyan súlyos és méretű szélsőségekkel akartam játszani, amilyeneket nem gyakran lát az interneten, mivel a legtöbb formatervezési minta korlátozottabb a használt súlyban. Ebben az esetben a súlyok széles skáláját használtam 100 és 900 között, római és dőlt betűkkel egyaránt. Miután elkezdtem elkészíteni az általam kedvelt elrendezést, számomra előfordult, hogy a képességeket szemléltető grafika készítése helyett sokkal érdekesebb lenne az ábrákat nem típusból készíteni: idézőjelek és egy kevés “infographic” stílusú betűtípus-adat.

Az ampersand up felületének utolsó érintését valójában a FontFont webhelyen található mintaminta oldal ihlette: létezik egy karakterjel-mintavevő, amely megmutatja egy ampersand súlyát, amelyek egymásra vannak rakva. Eredetileg mindegyiket ugyanolyan módon raktam egymásba, egy hurokban történő animációval -, de ez kissé nagy volt néhány böngészőnél, amely még mindig változó betűtípusokat és kulcskeretes animációkat valósított meg. Amikor lejátszás / szünet opcióval megütötte az átfedő elrendezést, tetszett, hogy miként néztek ki (elsősorban mobiltelefonon). Tehát megfordítottam, és ha statikus lett volna, aztán egyszer játszottam le az animációt, és visszatértem az elterjedt / réteges elrendezéshez.

Mindent összevetve, nagyon örülök mind a tartalomnak, mind a kialakításnak, és szeretem, hogyan mozog és fejlődik a képernyő különböző méretei között. Remélem, hogy inspirációt és útmutatást kínál másoknak is.

[A Monotype nemrégiben megbízott egy demonstrációs oldal elkészítésével és megtervezésével, amely bemutatja a klasszikus Erik Spiekermann FF Meta új változó betűkészlet kiadását. Ez az oldal szövege és néhány kép. A teljes élő oldal a CodePen-en található, és beágyazva van. Mindenki számára nyitva áll, tehát nyugodtan készítsen egy másolatot, és vele együtt játszhasson. Megnézheti a technológia bevezetését is.]

Eredeti tartalom a blogomban