Domača » UI / UX » Razumevanje tipografije 10 koristnih orodij in virov

    Razumevanje tipografije 10 koristnih orodij in virov

    V svojem zadnjem članku o razumevanju tipografije sem pisal o tem, kaj se dogaja pri oblikovanju tipografije in kako ga manipulirati, da bi izboljšal postavitev vaše spletne strani in izboljšal uporabniško izkušnjo. V tem članku sem na seznamu 10 mojih najljubših orodij za tipografijo na spletu.

    Te lahko pomagajo pri izgradnji omrežij HTML in področij vsebine, ustvarjanju stilov CSS, ustvarjanju imen pisav in kupom drugih zanimivih stvari. Oglejte si nekatere od spodnjih povezav in se prepričajte, da nam sporočite svoje mnenje v območju za razpravo.

    Priporočeno branje: Razumevanje tipografije: pisanje za splet

    Matrica pisave

    Ta spletni vodnik je objavil spletni dnevnik za 24-urno oblikovanje. Vsebuje matrično tabelo vseh standardnih spletnih pisav, ki jih privzeto najdete pri različnih prodajalcih programske opreme. Priljubljeni naslovi vključujejo programe Windows, Mac OS X, Microsoft Office in programe Adobe Creative Suite.

    Kontrola kontrasta barve

    Barvni kontrast je pogosto težava, ko se podate izven standardnega črno-belega modela. Ko najdete ujemanje, se vam zdi kot popolnost oblikovanja. Kljub temu je izbira slabe barvne kombinacije zelo slaba in bo negativno vplivala na celotno zasnovo. To majhno spletno orodje vam lahko pomaga izbrati niz barv, ki se ujemajo med seboj za katero koli postavitev sloga.

    HTML-Ipsum

    Ali potrebujete orodje Lorem Ipsum, ki lahko ustvari več kot le izhodno besedilo? Ta spletni generator HTML bo ustvaril kodne bloke za najpogostejše elemente strani. Nekateri primeri vključujejo neurejene sezname, sezname definicij, spletne obrazce, tabele in veliko drugih rešitev.

    Typechart

    Typechart je eno izmed mojih najljubših orodij kot CSS razvijalec. Pogosto iščem, da povežem določeno pisavo v svojem sistemu s spletnim projektom, vendar nimam časa, da prelistam celotno zbirko. To odlično orodje vam omogoča, da prebrskate skozi priljubljene izbire družin pisav in celo prenesete ustrezno kodo CSS!

    PX-to-EM.com

    Razen če ponastavite privzeto velikost besedila brskalnika, boste verjetno imeli težave, ki se ujemajo s slikovnimi pikami. Ta aplikacija v brskalniku ponuja tabelo pretvorbe in uporabniški vmesnik za px v em. To je zelo preprosto orodje, vendar ponuja priročno vodilo z zelo preprosto funkcionalnostjo - in ne morete premagati brezplačne cene.

    Nastavitev tipa CSS

    Ne priporočam, da se držim CSS Type Set predolgo, saj je resnično orodje za začetnike. Omogoča vam, da ustvarite kodo CSS na podlagi posebnih lastnosti pisave, ki jih izberete. Čeprav je sprva zelo uporaben, sčasoma postane opornica. In ne boste mogli motivirati, da sami obvladate CSS lastnosti. Če pa želite prihraniti čas pri projektu, tega orodja ni mogoče spregledati.

    tipično

    Tu je en resnično edinstven primer knjižnice za predogled pisav. Običajno zrcaljenje vključuje nekaj pisav, ki so izvirne za vaš operacijski sistem. Samodejno skenira vaš imenik pisav, da bi izbral najbolj varne spletne rešitve. Lahko jih primerjate vzporedno in preprosto izbirate med priljubljenimi možnostmi. To je še en odličen čas, ki ga shranite med zaznamke in ne razmišljate o tem do zadnje minute.

    Tipografska mreža

    Veliko se govori o oblikovanju okoli omrežja v HTML in CSS. Verjetno razumete koncept delovanja omrežij in merjenje spletne strani v pikslih se ne razlikuje. Ta vodnik CSS-Tricks je bolj podobno vodenemu prizadevanju za uvedbo osnov tipografije za digitalno dobo. To je precej naprednejša tema na področju spletnega oblikovanja. Ampak, če imate nekaj potrpljenja, vam priporočam, da preberete podrobnosti, da vidite, kako lahko te lastnosti omrežja dejansko vplivajo na postavitev strani.

    WhatTheFont!

    Vsi smo našli logotip ali sliko z nekaj res kul neidentificirane pisave. WhatTheFont je naredil kroge na internetu za nekaj let in je še vedno moj najljubši. Izbrali ste sliko, ki jo želite naložiti, in skript bo analiziral besedilo na sliki, da se bo ujemal s podobnimi pisavami. Aplikacija vas bo celo povezala z zunanjimi izdelki, kjer lahko kupite vsako pisavo.

    Kalkulator osnovne / višinske višine

    Končno resnično močno orodje za generiranje višine in lastnosti ritma. Preprosto vnesite vrednosti za osnovno velikost pisave in višino črte ali pa vključite svojo kodo CSS po meri na stran. Aplikacija bo ustvarila predogled v nekaj različnih stilih, tako da boste lahko dobili predstavo o tem, kako bi te lastnosti izgledale na vaši spletni strani.