15 nástrojov pre online typografiu, ktoré by mali všetci dizajnéri vedieť
Typografia je základom každého dizajnu, pretože čítanie je jednou z najzákladnejších vecí, ktoré robíme na webe. Typografia, ktorú si vyberiete, má vplyv na viacero aspektov webových stránok vrátane čitateľnosť, nálada a celkové užívateľské skúsenosti. Je to dôležité pre dizajnérov a vývojárov poznať základné princípy typografie na vytvárať čitateľné príjemné vzory.
Hovorili sme o nástrojoch na párovanie fontov predtým a dnes budeme s vami zdieľať nástroje na písanie, ktoré vám umožnia lepšie čítanie na webových stránkach, ktoré vytvárate a / alebo navrhujete.
Tu sú pluginy, online nástroje a skripty, ktoré vám pomôžu vytvoriť úžasné titulky a čistý čitateľný text.
Stíteksoznacenímtypu
Nebude pre vás robiť návrhy, ale určuje správne označenie pomocou štýlu pre bežné typografické šablóny. Môže vám tiež poskytnúť tipy na správne kopírovanie textu.
Odhlásiť sa: Demo | dokumentácia
Gutenberg
Gutenberg je flexibilná a ľahko použiteľná štartovacia súprava pre vývojárov a dizajnérov. Pomôže vám nastaviť veľkosť základného typu, výšku čiary a maximálnu šírku. Gutenberg je open-source projekt, takže ho môžete prispieť, prispôsobiť a upraviť.
Odhlásiť sa: Demo | dokumentácia
Lettering.js
Lettering.js je plugin jQuery, ktorý vám dáva kontrolu nad typom kerningu. To vám umožní ľahko získať redakčný dizajn a spravovať kód. Táto webová stránka obsahuje úžasné príklady typografie vytvorené s týmto pluginom pre inšpiráciu.
Odhlásiť sa: Demo | dokumentácia
Typebase.css
Typbase.css je prispôsobiteľný typografický štýl. Obsahuje aj morské i menej verzie a je ľahko upravená na moderné webové projekty.
Odhlásiť sa: Demo | dokumentácia
FitText
FitText je plugin, ktorý vám umožní prispôsobiť veľkosti písma vašich webových stránok. To vám pomôže dosiahnuť škálovateľné titulky pre rôzne rozlíšenie obrazovky; inými slovami, prispôsobte svoju typografiu. Je určený na zobrazovanie obrovského textu.
Odhlásiť sa: Demo | dokumentácia
Kerning.js
Kerning.js vám pomôže automaticky premeniť, zmenšiť a upraviť svoju typografiu pomocou CSS. Je ľahké začať s Kerning.js.
Odhlásiť sa: Demo | dokumentácia
Typesettings.css
Typesettings.css je vaše ihrisko pre vytváranie minimalistických webových projektov alebo blogov. Všetky použité typografické štýly sú inšpirované grafickým dizajnom.
Odhlásiť sa: Demo | dokumentácia
batoh
S batohom môžete produkovať úžasnú tekutú typografiu vďaka novej, citlivej vlastnosti na veľkosť písma. Vytváranie citlivej typografie je výnimočne jednoduché.
Odhlásiť sa: Demo | dokumentácia
FlowType.JS
Najpravdepodobnejšia typografia obsahuje 45 až 75 znakov na riadok, ale zistiť, že táto rovnováha je pre vývojárov náročnou úlohou. FlowType.JS zmení veľkosť písma a následne výšku riadku na základe šírky určitého prvku.
Odhlásiť sa: Demo | dokumentácia
Blast.js
Blast.js vám pomôže oddeliť texty, aby ste mohli jednoduchšie manipulovať s typografiou. Obsahuje 4 zabudované oddeľovače: znak, slovo, vetu a prvok. Môže tiež zodpovedať vlastným výrazom a frázam.
Odhlásiť sa: Demo | dokumentácia
slabText
slabText je jednoduchý skript, ktorý rozdeľuje titulky do riadkov, aby dokonale vyplnil dostupný horizontálny priestor. Skript vypočíta ideálny počet znakov nastavený v každom riadku vydelením dostupnej šírky podľa veľkosti písma pixelov.
Odhlásiť sa: Demo | dokumentácia
Zadajte mierku
Pomocou typovej stupnice môžete zobraziť ukážku a vybrať správnu typovú stupnicu pre svoj projekt. Neexistujú žiadne pravidlá - stačí hrať s veľkosťou písma, mierkou a rôznymi webovými písmenami.
Odhlásiť sa: Demo | dokumentácia
typografické
Typografická pomôcka vám umožňuje prispôsobiť typografiu. Jediné, čo musíte urobiť, je len vybrať niekoľko písiem, nastaviť niekoľko nastavení a dostanete pekne reagovať typografiu.
Odhlásiť sa: Demo | dokumentácia
típí
Typi je zmes saasov, ktorú môžete použiť s ľahkosťou. Vytvára veľkosť písma a výšku línií pre HTML a ďalšie prvky. Typ Typi má aj funkciu vertikálneho rytmu na výpočet výšky liniek.
Odhlásiť sa: Dokumentácia
Lining.js
Pomocou doplnku Lining.js získate úplnú kontrolu nad webovou typografiou. Podporuje sa na najobľúbenejších prehliadačoch, ako sú Safari, Google Chrome, Opera a Mozilla Firefox.
Odhlásiť sa: Demo | dokumentácia
Bonus: 2 Ďalšie nástroje!
Stav webového typu
Stav webového typu je webová lokalita, ktorá ponúka aktuálne údaje o podpore typu a funkcií na webe. Môžete použiť vyhľadávanie alebo kategórie, ako je kerning, medzery, vloženie písma CSS a ďalšie, aby ste našli presne to, čo potrebujete.
Typography
Typograf je úžasný webový a náčrtokový plugin, ktorý vám umožňuje vložiť neporušené medzery po jednom písmenom, pripojiť číslo a jednotku. Odstraňuje tiež dvojité medzery, vstupy, body a iné znaky, takže môžete dosiahnuť čistú krásnu typografiu, ktorá je ľahko čitateľná.
Odhlásiť sa: Dokumentácia
