Variabilní písma: co to je a jak je používat?

V tomto článku si povíme o variabilních písmech – jak zajímavý a užitečný nástroj je, ale zároveň podceňovaný. Nezapomeneme také zmínit nevýhody a nuance práce s nimi.

Tento článek se bude zabývat následujícími problémy:

  • historie původu;
  • technické vlastnosti;
  • výhody a nevýhody;
  • vlastnosti použití;
  • příklady kreativního využití .

Trochu historie

Na úvod si povíme něco o historii vývoje technologií fontů.

V druhé polovině osmdesátých let zavedl PostScript Adobe a TrueType společnost Apple pro vývoj souborů písem. Oba použili Bézierovy křivky ke konstrukci znaků. Tyto aktualizované formáty stále používáme při práci se soubory písem.

V roce 1991 společnost Adobe představila technologii Multiple Master jako rozšíření formátu PostScript, které umožňovalo uložit více možností obrysu pro jeden glyf do jednoho souboru písma. Těmito možnostmi byly krajní body na ose, mezi nimiž byly nalezeny mezilehlé hodnoty, například pro změnu hmotnosti nebo šířky.

Pro použití s ​​takovým písmem bylo nejprve nutné vygenerovat statický styl pomocí speciálního programu (Adobe Type Manager) a poté jej načíst do systému, aby bylo možné jej použít v grafickém editoru. Kvůli složitosti použití se tento formát nikdy nestal populárním a návrháři písma nadále vydávali statické tváře.

V roce 1997 Adobe a Microsoft společně představily technologii OpenType. Byl založen na formátu TrueType, ale zahrnoval schopnost implementovat znatelně větší počet znaků (65 000, dříve byl limit 256), stejně jako funkce OpenType, bez nichž si dnes moderní písmo neumíme představit. Tady mluvíme například o podpoře malých písmen, tabulkových znaků, nadřízených, stylistických sad, kontextových alternativ atd. OpenType je dodnes nejpopulárnějším formátem.

A konečně v roce 2016 společnost Adobe, Apple, Google a Microsoft ohlásily novou verzi formátu OpenType – proměnné písma OpenType. Od tohoto okamžiku mají návrháři písma možnost vložit informace o několika stylech rodiny písem do jednoho souboru. Podstata tohoto formátu je podobná Multiple Master s jedním zásadním rozdílem – nyní nemusíte generovat statické styly předem. Parametry lze vybrat přímo v grafickém editoru.

Technické vlastnosti

Podívejme se blíže na to, jak se tento formát liší od klasického OpenType.

Když designér zakoupí rodinu písem, například grotesku skládající se z 9 tlouštěk, má k dispozici 9 samostatných souborů písem. Tyto plochy byly předem připraveny návrhářem typů, váha byla vypočítána tak, aby byly tloušťky rovnoměrně rozloženy od nejtenčích po nejsilnější.

< p>Variabilní písmo je jeden soubor, jehož rozsah stylů je omezen pouze nejtenčí a nejtučnější tloušťkou. Návrhář může nezávisle zvolit libovolnou pozici mezi nimi.

Pokud se podíváte dovnitř písma, pak má každý znak kotevní body, kolem kterých je postaven. A pokud je počet těchto bodů stejný tenkým i tučným písmem, program je může spojit a vypočítat mezipolohy bodů. Vývoj písma samozřejmě není tak jednoduchý a přímočarý a často musíme zadat více než dvě kotevní váhy, ale to nemá vliv na uživatelskou zkušenost.

Rozpětí mezi dvěma extrémními plochami se nazývá osa. V grafických editorech, například Adobe, to vypadá jako lišta s posuvníkem, který lze přesunout výběrem požadované hodnoty.

Příklady variačních os

První možností je již popsaná osa tloušťky. Většina rodin písem má různé tloušťky a teoreticky mohou být všechny proměnné.

Představme si situaci, že jste si koupili běžnou rodinu písem a plánujeme ji použít k sázení knihy nebo webu s velkým množstvím textu. Víte, jak silný by měl být hlavní text, aby ho uživatel mohl pohodlně číst. Najednou však nastal problém – běžný styl v rodině se vám zdá příliš lehký a další nejsilnější, řekněme, střední, je příliš odvážný. Ideální by byla střední tloušťka, ale žádná taková možnost neexistuje. Pokud by toto písmo bylo proměnlivé, pak stačilo přesunout jezdec v grafickém editoru nebo nastavit vlastní hodnotu CSS v kódu webu do mezilehlé polohy mezi těmito dvěma styly.

Další docela běžnou osou je šířka písma. Ve statických rodinách budete mít několik možností šířky, například Normální, Zúžené nebo Rozšířené. Ve variabilním písmu můžete ručně upravit šířku mezi nejužším a nejširším stylem.

Toto nastavení může být nutné, například pokud sázíte text do úzkých sloupců a potřebujete tam umístit co nejvíce textu. Normální šířka je pro tento účel příliš velká a úzká je nevhodná pro čtení velkého množství textu. Variabilní písmo by vám umožnilo trochu zúžit typ bez ztráty čitelnosti.

Třetí osa je osou naklonění. Je použitelná v případech, kdy písmena v šikmém stylu mají stejnou konstrukci jako ve svislé. Nejčastěji tuto možnost najdete v groteskách.

Můžete nezávisle zvolit úhel sklonu písma, čímž upravíte, jak moc tento styl v bloku textu vynikne. Tato možnost bude užitečná, pokud je třeba psát velké množství informací kurzivou, aby uživatel při čtení nepociťoval nepohodlí.

A konečně další méně běžný, ale také vložený do formátu OTF Var – osa optické velikosti.

Možná jste viděli podrodiny Zobrazení a Text ve variabilních písmech. První se obvykle vyznačuje větším kontrastem, zpracováním detailů a užší roztečí. Styly zobrazení se používají v nadpisech, plakátech a v jiných případech, kdy jsou zapotřebí velké velikosti textu.

Podrodina textu, na naopak, méně kontrastní, má drsnější detaily. Je čitelnější v malých velikostech a velkých blocích textu.

V proměnlivém písmu můžete vygenerovat přechodnou verzi, která bude stále čitelná v malých velikostech, ale bude elegantnější než standardní styl textu. Tato možnost by byla ideální například pro malé podnadpisy.

Mluvili jsme o osách, které již byly stanoveny vývojáři formátu. Existují pro ně speciální písmena:

váha – váha

šířka – šířka

slnt – úhel náklonu

ital – kurzíva

opsz – optická velikost

Návrháři písma však mohou navrhovat a implementovat své vlastní osy.

Existují implementované příklady, kdy se může měnit délka patky, výška velkých nebo malých písmen, výšky descenderu, kontrast atd.

< span class = "ui_preloader ui_preloader - velký">

Písmo lze samozřejmě také dekorativně změnit. Všechno zde je omezeno pouze představivostí autora.

Představte si, že pouze jedna osa může poskytnout tisíc variant stylů písma. Pokud existují dvě osy, pak je to již jeden milion. A díky přítomnosti vlastních os se možnosti písma stávají neomezenými.

Abychom to shrnuli, variabilní písma mohou vyřešit téměř jakýkoli typografický problém.

Výhody a nevýhody variabilních písem

Pojďme si nyní promluvit o některých problémech, kterým čelíme při používání proměnných písem, a zajímavých způsobech používání proměnných písem

Všimněte si, že technologie variabilního písma existuje již mnoho let. Navzdory skutečnosti, že technické možnosti editorů písem se staly velmi hodnými, a díky tomu lze variabilní písma zjednodušit a usnadnit – neobdržely popularitu ani masové použití. To naznačuje, že buď neexistuje prostor pro jejich použití, nebo že samotný produkt ještě nesplňuje požadavky trhu, nebo nástroje neumožňují jejich použití. V tuto chvíli ne všechny grafické editory a prohlížeče podporují proměnná písma.

Největší nevýhodou variabilních písem je špatná kvalita. Drtivá většina variabilních písem je vyrobena velmi průměrně a v důsledku toho mohou být při praktickém použití nepředvídatelné v nejvíce nevhodném okamžiku.

Ještě jeden příklad. Pokud máte web, který má 1 000 000 stažení denně a používá celou rodinu Norms Pro, pak se všemi styly na webu zabírá 5306 kilobajtů. Pokud používáte proměnné písmo z této rodiny – pouze 1875. Podívejte se na níže uvedenou tabulku. Vidíme, že s tak velkým počtem stažení můžete získat rozdíl 3272 GB, který musí být nahrán ze serveru. Je zřejmé, že se nejedná o významný rozdíl pro každé konkrétní načtení webu, ale celkově to již hraje určitou roli.

Za zmínku stojí také to, že drtivá většina proměnných písem není „čipována“. Je těžké se to naučit. Výsledkem je, že se variabilní písma nemusí vždy zobrazovat správně v malých velikostech.

Jak používat proměnná písma

Pojďme se nyní podívat, jak ve vaší práci používat proměnná písma.

Vezměme si nejprve Adobe Illustrator. Například jste zadali nějaký text a chcete pro něj vybrat proměnné písmo, které je již nainstalováno. V obecném seznamu mají taková písma speciální značku „var“. Mimochodem, Adobe má vlastní proměnná písma, která přicházejí s nejnovějším softwarem, takže s nimi můžete nejprve experimentovat.

/span>

Pokud jste vybrali proměnné písmo, na panelu Znaky se zobrazí další tlačítko Variabilní písmo. Za ním jsou skryty všechny proměnné osy, které jsou v písmu; jejich parametry lze měnit pomocí posuvníků. Výsledek je viditelný okamžitě. Všechna ostatní nastavení na tomto panelu zůstanou stejná.

Můžete také vybrat jeden ze stylů ze seznamu a použít tuto rodinu jako statickou.

V aplikaci Sketch je princip naprosto stejný, pouze proměnná písma nemají žádné speciální označení.

Variabilní písma lze také vložit na WEB pomocí CSS. Nebudeme se tím podrobně zabývat. Ale můžete vidět příklad, jak jsou variabilní písma integrována na WEB.

Další informace o používání proměnných písem na WEBu najdete v článcích média Richarda Ruttera:

Začínáme s proměnlivými písmy – rychlé , ale smysluplný úvod.

Jak používat proměnná písma v reálném světě – popisuje problémy, se kterými se můžete setkat, a jak je řešit.

Případy kreativního použití

< p>Nabízíme vám vidět kreativní příklady – jak můžete používat variabilní písma, pokud použijete svou představivost.

Příklady, jak roztáhnout text v závislosti na ohraničení kontejneru.

< span class = "ui_preloader ui_preloader- -big">

Příklad použití variabilních písem AR.

Příklad toho, jak se písmo může změnit v závislosti na vzdálenosti, ze které se na něj díváme.

Příklady, jak můžete upravit váhu písma v závislosti na podmínkách čtení, v tomto případě osvětlení.

Můžete jít ještě dále a vytvářet pohyblivé obrázky mimo typ, jak navrhuje os-praxis.org. Je dokonce možné je zbarvit překrýváním několika písmen na sebe, jak je vidět na experimentech Toshi Omagariho. Ačkoli to rozhodně není zamýšlené použití písma.

Užitečné zdroje

Chtěli bychom navrhnout několik zdrojů, kde si můžete vyzkoušet různá písma.

Nejprve existuje osa-praxis.org, která obsahuje velké množství proměnných písem. Můžete si také stáhnout písma, která tam máte.

Zadruhé, toto je v-fonts.com, kde můžete také zjednodušeným způsobem vyzkoušet různá písma.

A konečně skvělé web, který ve své práci aktivně používáme k testování variabilních písem dinamodarkroom.com od studia Dinamo. Na webu můžete otestovat nejen osy variability, ale také funkce OpenType a také nahrát statická písma se zadanými parametry.

Místo závěru

Variabilní písma mají šance stát se nedílnou součástí světa písem. V posledních letech se o nich hodně mluvilo, ale zatím se nerozšíří. Již nyní jsou nástrojem pro řešení řady úzkých úkolů. Stojí za zmínku, že variabilní písma jsou stále populárnější. Stále více grafických editorů a editorů videa začíná podporovat různá písma. Variabilní písma převezmou svět! Je to jen otázka času!

Máte zájem o podobný design?

Další práce

Objednávka designu

Naše portfolio obsahuje stovky projektů: interiérový design, webové stránky, reklamní kampaně, loga, corporate identity. Každý úkol řešíme smysluplně, elegantně a krásně.

Abychom mohli začít, musíme si promluvit. Stačí něco říct o vašem projektu, nechat kontakty a my Vás budeme kontaktovat, abychom vše probrali.