15 Online Typografiverktøy Alle designere bør vite

Typografi er grunnlaget for ethvert design, fordi lesing er en av de mest grunnleggende tingene vi gjør på nettet. Typografien du velger har innvirkning på flere aspekter av et nettsted, inkludert lesbarhet, humør og den generelle brukeropplevelsen. Det er viktig for designere og utviklere å Kjenn de grunnleggende prinsippene for typografi til Lag lesbare, behagelige design.

Vi har snakket om skrifttypeparingsverktøy før, og i dag skal vi dele med deg, skrive verktøy som kan gi deg en bedre leseropplevelse på nettstedene du bygger og / eller design.

Her er plugins, elektroniske verktøy og skript som vil hjelpe deg til skape flotte overskrifter og ren lesbar tekst.

skiltet

Det vil ikke gjøre designvalg for deg, men vil definere riktig markering med styling for vanlige typografiske maler. Det kan også gi deg tips om hvordan du stiler tekstkopi på riktig måte.

Sjekk ut: Demo | dokumentasjon

Gutenberg

Gutenberg er en fleksibel og lett å bruke typografi startpakke for utviklere og designere. Det vil hjelpe deg med å angi basestørrelse, linjehøyde og maksimal bredde. Gutenberg er et open-source-prosjekt, så vær så snill å bidra, tilpass og modifiser det.

Sjekk ut: Demo | dokumentasjon

Lettering.js

Lettering.js er et jQuery-plugin som gir deg kontroll over kerningstype. Det lar deg få redaksjonell design med letthet og administrere kode. Nettstedet har fantastiske eksempler på typografi laget med denne plugin for inspirasjon.

Sjekk ut: Demo | dokumentasjon

Typebase.css

Typebase.css er et tilpassbart typografi stilark. Den inneholder både saas og mindre versjoner og er lett modifisert til moderne webprosjekter.

Sjekk ut: Demo | dokumentasjon

FitText

FitText er et plugin som vil gjøre nettstedets skriftstørrelser fleksible. Det vil hjelpe deg å oppnå skalerbare overskrifter for ulike skjermoppløsninger; med andre ord, gjør typografien din lydhør. Den er laget for kun å vise stor tekst.

Sjekk ut: Demo | dokumentasjon

Kerning.js

Kerning.js hjelper deg med å transformere, skala og endre typografien din med CSS. Det er lett å komme i gang med Kerning.js.

Sjekk ut: Demo | dokumentasjon

Typesettings.css

Typesettings.css er din lekeplass for å lage minimalistiske webprosjekter eller blogger. Alle typografi stilene som brukes her er inspirert av grunnleggende grafisk design.

Sjekk ut: Demo | dokumentasjon

Ryggsekk

Med Rucksack kan du produsere fantastisk væsketypografi takket være en ny, responsiv egenskap på skriftstørrelsen. Opprett responsiv typografi gjøres svært enkelt.

Sjekk ut: Demo | dokumentasjon

FlowType.JS

Den mest lesbare typografien inneholder mellom 45 og 75 tegn per linje, men for å finne den balansen er en utfordrende oppgave for utviklere. FlowType.JS endrer skriftstørrelsen og deretter linjens høyde basert på et bestemt elements bredde.

Sjekk ut: Demo | dokumentasjon

Blast.js

Blast.js vil hjelpe deg å skille tekster for å gjøre det lettere å manipulere typografien. Den inneholder 4 innebygde avgrensere: tegn, ord, setning og element. Det kan også matche egendefinerte uttrykk og uttrykk.

Sjekk ut: Demo | dokumentasjon

slabText

slabText er et enkelt skript som deler overskrifter i rader for å fylle ut det tilgjengelige horisontale rommet. Skriptet beregner et ideelt antall tegn som skal settes i hver rad ved å dele tilgjengelig bredde med piksel skriftstørrelse.

Sjekk ut: Demo | dokumentasjon

Type Skala

Med Type Scale kan du forhåndsvise og velge riktig type skala for prosjektet. Det finnes ingen regler - bare spill rundt med skriftstørrelse, skala og forskjellige webfonter.

Sjekk ut: Demo | dokumentasjon

typografisk

Typografisk hjelper deg med å gjøre typografi lydhør. Alt du trenger å gjøre er å bare velge noen få fonter, sett noen innstillinger, og du får fin responsiv typografi.

Sjekk ut: Demo | dokumentasjon

Typi

Typi er en saas-blanding du kan bruke til å gjøre responsiv typografi enkelt. Den skaper skriftstørrelse og linjehøyder for HTML og andre elementer. Dessuten har Typi en vertikal rytmefunksjon for å beregne linjehøyder.

Sjekk ut: Dokumentasjon

Lining.js

Med Lining.js-plugin-modulen får du full kontroll over webtypografi. Den støttes på de fleste populære nettlesere som Safari, Google Chrome, Opera og Mozilla Firefox.

Sjekk ut: Demo | dokumentasjon

Bonus: 2 Flere verktøy!

Statens webtype

Status på nettet Type er et nettsted som tilbyr oppdatert data om støtten til type og funksjoner rundt på nettet. Du kan bruke søk eller kategorier, for eksempel kerning, kapitalavstand, CSS-skriftlasting og mer for å finne akkurat det du trenger.

Typograph

Typografi er et kjempefint web- og skisseplugin som lar deg legge til ikke-splittede mellomrom etter ord med én bokstav, koble til nummeret og enheten. Den fjerner også dobbeltrom, går inn, prikker og andre typografier, slik at du kan oppnå ren, vakker typografi som er lett å lese.

Sjekk ut: Dokumentasjon