15 Nástroje online typografie Všichni designéři by měli vědět
Typografie je základem každého designu, protože čtení je jednou z nejzákladnějších věcí, které děláme na webu. Typografie, kterou si vyberete, má dopad na více aspektů webové stránky, včetně čitelnost, nálada a celkový uživatelský zážitek. Pro projektanty a vývojáře je to nezbytné znát základní principy typografie na vytvářet čitelné příjemné návrhy.
Předtím jsme hovořili o nástrojích pro párování písem a dnes se s vámi budeme podělit o nástroje pro psaní, které vám umožní dosáhnout lepších zkušeností se čtením na webových stránkách, které vytváříte a / nebo navrhujete..
Zde jsou pluginy, online nástroje a skripty, které vám pomohou vytvořit úžasné titulky a čitelný text.
Typový štítek
Nebude to pro vás výběr designu, ale bude definovat správné značení se stylem pro společné typografické šablony. Může vám také poskytnout tipy, jak správně kopírovat text.
Překontrolovat: Demo | Dokumentace
Gutenberg
Gutenberg je flexibilní a snadno použitelná startovací sada typografie pro vývojáře a projektanty. Pomůže vám nastavit velikost základního typu, výšku řádku a maximální šířku. Gutenberg je open-source projekt, takže ho neváhejte přispět, přizpůsobit a upravit.
Překontrolovat: Demo | Dokumentace
Lettering.js
Lettering.js je plugin jQuery, který vám dává kontrolu nad typem kerningu. To vám umožní získat redakční design s lehkostí a spravovat kód. Webové stránky obsahují úžasné příklady typografie vytvořené s tímto pluginem pro inspiraci.
Překontrolovat: Demo | Dokumentace
Typebase.css
Typebase.css je přizpůsobitelný styl typografie. Obsahuje obě verze a méně verzí a je snadno upravitelný do moderních webových projektů.
Překontrolovat: Demo | Dokumentace
FitText
FitText je plugin, který bude vaše webové stránky font-size flexibilní. To vám pomůže dosáhnout škálovatelných titulků pro různá rozlišení obrazovky; jinými slovy, aby vaše typografie reagovala. Je určen pouze pro zobrazení obrovského textu.
Překontrolovat: Demo | Dokumentace
Kerning.js
Kerning.js vám pomáhá automaticky transformovat, měnit měřítko a upravovat typografii pomocí CSS. Začínáme s Kerning.js.
Překontrolovat: Demo | Dokumentace
Sazby.css
Typeettings.css je vaše hřiště pro vytváření minimalistických webových projektů nebo blogů. Všechny typografické styly zde použité jsou inspirovány základy grafického designu.
Překontrolovat: Demo | Dokumentace
Batoh
S batohem můžete vytvářet úžasnou tekutinovou typografii díky nové, citlivé vlastnosti velikosti písma. Vytváření citlivé typografie je mimořádně snadné.
Překontrolovat: Demo | Dokumentace
FlowType.JS
Nejčitelnější typografie obsahuje mezi 45 a 75 znaky na řádek, ale najít rovnováhu je náročný úkol pro vývojáře. FlowType.JS změní velikost písma a následně výšku řádku na základě šířky konkrétního prvku.
Překontrolovat: Demo | Dokumentace
Blast.js
Blast.js vám pomůže oddělit texty a usnadnit tak manipulaci s typografií. Obsahuje 4 zabudované oddělovače: znak, slovo, větu a prvek. Může také odpovídat vlastním výrazům a frázím.
Překontrolovat: Demo | Dokumentace
deskaText
slabText je jednoduchý skript, který rozděluje titulky do řádků tak, aby dokonale vyplnily dostupný vodorovný prostor. Skript vypočítá ideální počet znaků nastavených v každém řádku dělením dostupné šířky podle velikosti písma pixelu.
Překontrolovat: Demo | Dokumentace
Typ Měřítko
S možností Měřítko můžete zobrazit náhled a vybrat měřítko správného typu pro svůj projekt. Neexistují žádná pravidla - stačí si hrát s velikostí písma, měřítkem a různými webovými fonty.
Překontrolovat: Demo | Dokumentace
Typografický
Typografické vám pomůže reagovat na typografii. Jediné, co musíte udělat, je jen vybrat několik fontů, nastavit několik nastavení a získat pěknou citlivou typografii.
Překontrolovat: Demo | Dokumentace
Typi
Typi je saas mix, který můžete snadno použít k vytváření citlivé typografie. Vytváří velikost písma a výšku řádků pro HTML a další prvky. Typi má také funkci vertikálního rytmu pro výpočet výšek čar.
Překontrolovat: Dokumentace
Lining.js
S pluginem Lining.js získáte úplnou kontrolu nad webovou typografií. Je podporován na většině oblíbených prohlížečů, jako je Safari, Google Chrome, Opera a Mozilla Firefox.
Překontrolovat: Demo | Dokumentace
Bonus: 2 Další nástroje!
Stav webového typu
Stav webového typu je webová stránka, která nabízí aktuální informace o podpoře typu a funkcí v okolí webu. Můžete použít vyhledávání nebo kategorie, například kerning, rozložení velkých písmen, načítání fontů CSS a další, abyste našli přesně to, co potřebujete.
Typograf
Typograph je úžasný web a náčrtek plugin, který vám umožní dát non-lámání mezery po jedno-dopis slova, připojit číslo a jednotku. Odstraňuje také dvojité mezery, vstupy, tečky a další překlepy, takže můžete dosáhnout čisté krásné typografie, která je snadno čitelná.
Překontrolovat: Dokumentace
