Razumijevanje tipografije 10 Korisni alati i resursi

U mom posljednjem članku o razumijevanju tipografije napisao sam o tome što ide u dizajn tipografije i kako manipulirati njime kako bih poboljšao izgled Vaše web stranice i kako bi poboljšao korisničko iskustvo. U ovom članku navodim popis 10 mojih omiljenih alata za tipografiju na internetu.

To može pomoći u izgradnji HTML mreža i područja sadržaja, stvaranju CSS stilova, stvaranju imena fontova i hrpi drugih zanimljivih stvari. Pogledajte neke od veza u nastavku i obavezno nam javite svoje misli u području za raspravu.

Preporučeno čitanje: Razumijevanje tipografije: pisanje za web

Matrica fonta

Ovaj online vodič objavljen je u blogu za 24-satni dizajn. Sadrži matričnu tablicu svih standardnih web-fontova koje ćete po defaultu pronaći u raznim dobavljačima softvera. Popularni naslovi uključuju programe Windows, Mac OS X, Microsoft Office i Adobe Creative Suite.

Provjera kontrasta boje

Kontrast boja je često problem kada putujete izvan standardnog crno-bijelog modela. Kada naiđete na utakmicu, osjećate se kao savršenstvo dizajna. Ipak, loš izbor kombiniranih boja izgleda jako loše i negativno će utjecati na cjelokupni dizajn. Ovaj mali web alat može vam pomoći da odaberete skup boja koje odgovaraju jedni drugima za bilo koji stilski izgled.

HTML-Ipsum

Jeste li u potrebi za Lorem Ipsum alatom koji može učiniti više nego samo izlazni tekst? Ovaj on-line HTML generator stvorit će blokove koda za najčešće elemente stranice. Neki primjeri uključuju neuredne popise, popise definicija, web-obrasce, tablice i mnoga druga rješenja.

Typechart

Typechart je jedan od mojih omiljenih alata kao CSS programer. Često pokušavam uskladiti određeni font na mom sustavu s web-projektom, ali jednostavno nemam vremena za pregledavanje cijele zbirke. Ovaj sjajan alat omogućuje pregledavanje popularnih izbora fontova i čak preuzimanje odgovarajućeg CSS koda!

PX-to-EM.com

Osim ako ponovno postavite zadanu veličinu teksta preglednika, vjerojatno ćete imati problema s podudaranjem ems s pikselima. Ova aplikacija u pregledniku nudi i tablicu konverzije i korisničko sučelje za px do em. To je vrlo jednostavan alat za siguran, ali nudi zgodan vodič s vrlo jednostavnim funkcionalnostima - i ne možete pobijediti besplatnu cijenu.

Postavka CSS tipa

Ne preporuÄujem da se predugo držite CSS seta, jer je to uistinu alat za početnike. To vam omogućuje generiranje CSS koda na temelju određenih svojstava fonta koje odaberete. Iako je isprva vrlo korisno, s vremenom postaje štaka na koju se možete osloniti. I nećete biti u stanju motivirati da sami ovladate CSS svojstvima. Ali ako trebate uštedjeti vrijeme na projektu, ovaj alat se ne može previdjeti.

okretanje tipično

Ovdje je jedan doista jedinstven primjer knjižnice za pregled fontova. flipping tipično uključuje pregršt fontova koji su izvorni za vaš operativni sustav. Ona automatski skenira vaš direktorij fontova kako bi pokupila većinu web-sigurnih rješenja. Možete ih usporediti jedan uz drugi i lako birati između omiljenih opcija. Ovo je još jedan odličan čuvar vremena koji označavate i ne razmišljate o njemu do zadnje minute.

Tipografska mreža

Mnogo se govori o dizajniranju oko mreže u HTML-u i CSS-u. Vjerojatno razumijete koncept rada mreže, a mjerenje web-lokacije u pikselima se ne razlikuje. Ovaj mrežni vodič za CSS-Tricks više je kao vođeni pokušaj uvođenja osnove tipografije za digitalnu eru. To je mnogo naprednija tema u području web dizajna. Ali ako imate malo strpljenja, preporučujem prolazak kroz detalje kako biste vidjeli kako ta svojstva rešetke mogu stvarno utjecati na izgled stranice.

WhatTheFont!

Svi smo pronašli logotip ili sliku s nekim stvarno kul neidentificiranim fontom. WhatTheFont je napravio rundi na internetu za nekoliko godina i to je još uvijek omiljena od mojih. Možete odabrati sliku za učitavanje i njihova skripta će analizirati tekst unutar slike kako bi odgovarala sličnim tipovima pisama. Aplikacija će vas čak povezati s vanjskim proizvodima gdje možete kupiti svaki font u vašu korist.

Kalkulator osnovne / linearne visine

Konačno, vrlo moćan alat za generiranje visine linije i svojstava ritma. Jednostavno unesite vrijednosti za osnovnu veličinu fonta i visinu retka ili uključite vlastiti prilagođeni CSS kod na stranu. Aplikacija će generirati preglede u nekoliko različitih stilova, tako da možete dobiti predodžbu o tome kako bi ta svojstva izgledala na vlastitoj web-lokaciji.