15 Instrumente tipografice online Toate designerii ar trebui să știe
Tipografia este fundamentul oricărui design, deoarece citirea este unul dintre cele mai elementare lucruri pe care le facem pe web. Tipografia pe care o alegeți are un impact asupra mai multor aspecte ale unui site web, inclusiv lizibilitatea, starea de spirit și experiența generală a utilizatorului. Este esențial pentru designeri și dezvoltatori cunosc principiile de bază ale tipografiei la creați desene plăcute.
Am vorbit despre instrumente de asociere a fonturilor înainte și astăzi vom împărtăși cu dvs. instrumente de tip care vă pot obține o experiență mai bună de citire pe site-urile pe care le construiți și / sau proiectați.
Iată pluginurile, instrumentele online și scripturile care vă vor ajuta creează titluri minunate și curățați textul ușor de citit.
placa de tip
Nu va face alegeri de design pentru dvs., ci va defini marcajul corect cu stil pentru șabloane tipografice comune. De asemenea, vă poate oferi sfaturi despre cum să copiați corect textul.
Verifică: Demo | Documentație
Gutenberg
Gutenberg este un kit de pornire tipografic flexibil și ușor de utilizat pentru dezvoltatori și designeri. Acesta vă va ajuta să setați dimensiunea tipului de bază, înălțimea liniei și lățimea maximă. Gutenberg este un proiect cu sursă deschisă, deci nu ezitați să-l contribuiți, să-l adaptați și să-l modificați.
Verifică: Demo | Documentație
Lettering.js
Lettering.js este un plugin jQuery care vă oferă controlul asupra tipului de kerning. Acesta vă permite să obțineți design editorial cu ușurință și să gestionați codul. Site-ul web oferă exemple uimitoare de tipografie realizate cu acest plugin pentru inspirație.
Verifică: Demo | Documentație
Typebase.css
Typebase.css este o foaie stilistică personalizabilă. Conține atât versiuni mai mici cât și versiuni mai puțin și este ușor de modificat în proiecte web moderne.
Verifică: Demo | Documentație
FitText
FitText este un plugin care va face ca dimensiunea fontului dvs. să fie flexibilă. Acesta vă va ajuta să obțineți titluri scalabile pentru diferite rezoluții ale ecranului; cu alte cuvinte, faceti tipografia sa raspunda. Este făcută pentru afișarea unui text imens.
Verifică: Demo | Documentație
Kerning.js
Kerning.js vă ajută să vă transformați, să scalați și să vă modificați automat tipografia cu CSS. Este ușor să începeți cu Kerning.js.
Verifică: Demo | Documentație
Typesettings.css
Typesettings.css este locul tău de joc pentru crearea de proiecte web minimaliste sau bloguri. Toate stilurile tipografice utilizate aici sunt inspirate de elementele de bază ale designului grafic.
Verifică: Demo | Documentație
Rucsac
Cu rucsacul puteți produce o tipografie fluidă uimitoare datorită unei proprietăți noi, receptive pe dimensiunea fontului. Crearea unei tipografii receptive se face excepțional de ușor.
Verifică: Demo | Documentație
FlowType.JS
Cea mai lizibilă tipografie conține între 45 și 75 de caractere pe linie, dar pentru a găsi acest echilibru este o sarcină dificilă pentru dezvoltatori. FlowType.JS modifică dimensiunea fontului și, ulterior, înălțimea liniei bazată pe lățimea unui element specific.
Verifică: Demo | Documentație
Blast.js
Blast.js vă va ajuta să separați textele pentru a ușura manipularea tipografiei. Acesta conține 4 delimitatori încorporați: caracter, cuvânt, propoziție și element. De asemenea, se pot potrivi expresii și expresii personalizate.
Verifică: Demo | Documentație
slabText
slabText este un script simplu care împarte titlurile în rânduri pentru a completa perfect spațiul orizontal disponibil. Scriptul calculează un număr ideal de caractere pe care să le setați în fiecare rând împărțind lățimea disponibilă în funcție de dimensiunea fontului pixelilor.
Verifică: Demo | Documentație
Scalare tip
Cu Scala tipului puteți să previzualizați și să alegeți scala de tipul corect pentru proiectul dvs. Nu există reguli - jucați doar cu dimensiunea fontului, scara și diferitele fonturi web.
Verifică: Demo | Documentație
Tipografic
Tipografia vă ajută să faceți tipografia receptivă. Tot ce trebuie să faceți este să selectați doar câteva fonturi, să setați câteva setări și veți obține o tipografie bine receptivă.
Verifică: Demo | Documentație
Typi
Typi este un mix de saasuri pe care îl puteți folosi pentru a face tipografia receptivă cu ușurință. Creează dimensiunea fontului și înălțimile liniei pentru HTML și alte elemente. De asemenea, Typi are o funcție de ritm vertical pentru a calcula înălțimile liniei.
Verifică: Documentație
Lining.js
Cu ajutorul pluginului Lining.js, veți avea control complet asupra tipografiei web. Este susținută de cele mai populare browsere precum Safari, Google Chrome, Opera și Mozilla Firefox.
Verifică: Demo | Documentație
Bonus: 2 Mai multe instrumente!
Statul de tip web
Statutul tipului Web este un site web care oferă date actualizate despre suportul pentru tip și caracteristici din întreaga rețea web. Puteți utiliza căutarea sau categorii, cum ar fi kerning, spațierea capitalului, încărcarea fontului CSS și multe altele pentru a găsi exact ceea ce aveți nevoie.
Typograph
Tipografia este un plugin minunat de web și schiță care vă permite să plasați spații care nu se rup după cuvinte de o literă, conectați numărul și unitatea. De asemenea, elimină spații duble, intră, puncte și alte greșeli, astfel încât să puteți obține o tipografie curată și frumoasă, ușor de citit.
Verifică: Documentație
