Înțelegerea tipografiei 10 Instrumente și resurse utile

În ultimul meu articol despre înțelegerea tipografiei, am scris despre ceea ce se întâmplă în proiectarea tipografiei și cum să o manipulați pentru a îmbunătăți aspectul site-ului dvs. și pentru a îmbunătăți experiența utilizatorului. În acest articol, înregistrez 10 dintre instrumentele mele preferate de tipografie pe internet.

Acestea vă pot ajuta să construiți rețelele HTML și zonele de conținut, creând stiluri CSS, generând nume de fonturi și o grămadă de alte lucruri interesante. Consultați câteva dintre link-urile de mai jos și asigurați-vă că ne-ați informat despre gândurile dvs. în zona de discuții post.

Recomandat lectură: Înțelegerea tipografiei: scrierea pentru web

Font Matrix

Acest ghid on-line a fost postat de blogul de design 24-aur. Dispune de o tabelă de matrice a tuturor fonturilor web standard pe care le veți găsi implicit de la diferiți furnizori de software. Titlurile populare includ programele Windows, Mac OS X, Microsoft Office și Adobe Creative Suite.

Verificarea contrastului culorii

Contrastul color este adesea o problemă atunci când vă aventurați în afara modelului standard alb-negru. Atunci când găsești un meci se simte ca perfecțiunea designului. Cu toate acestea, o alegere combo de culoare slabă arată foarte rău și va influența negativ designul general. Acest mic instrument Web vă poate ajuta să alegeți un set de culori pentru a se potrivi reciproc pentru orice aspect de stil.

HTML-Ipsum

Aveți nevoie de un instrument Lorem Ipsum care poate face mai mult decât textul de ieșire? Acest generator HTML online va crea blocuri de cod pentru cele mai obișnuite elemente de pagină. Câteva exemple includ listele neordonate, listele de definire, formularele web, tabelele și multe alte soluții.

Typechart

Typechart este unul dintre instrumentele mele favorite ca dezvoltator CSS. Caut frecvent să potrivesc un anumit font pe sistemul meu cu un proiect web, dar nu am timp să-mi schimb toată colecția. Acest instrument minunat vă permite să explorați alegerile populare ale familiilor de fonturi și chiar să descărcați codul CSS corespunzător!

PX-to-EM.com

Cu excepția cazului în care resetați dimensiunea implicită a textului browserului, probabil veți avea probleme care se potrivesc ems cu pixeli. Această aplicație în browser oferă atât o tabelă de conversie, cât și o interfață utilizator pentru pixeli. Este un instrument foarte simplu pentru sigur, dar oferă un ghid la îndemână cu o funcționalitate foarte simplă - și nu puteți să bateți eticheta de preț liber.

Setarea tipului CSS

Nu recomand să lipiți prea mult timp cu CSS Type Set deoarece este cu adevărat un instrument de începător. Acesta vă permite să generați codul CSS pe baza proprietăților specifice ale fonturilor pe care le selectați. În timp ce este foarte util la început, în timp devine o carja care se poate sprijini. Și tu nu vei fi capabil să stăpânești singuri proprietățile CSS. Dar dacă trebuie să economisiți timp pentru un proiect, acest instrument nu poate fi trecut cu vederea.

flipping tipic

Iată un exemplu cu adevărat unic al unei biblioteci de previzualizare a fonturilor. flipping tipic include o mână de fonturi care sunt originale pentru sistemul dvs. de operare. Se auto-scanează directorul de fonturi pentru a obține cele mai multe soluții pentru securitatea web. Le puteți compara una lângă alta și puteți alege cu ușurință opțiunile preferate. Acesta este un alt moment excelent de economisire a marcajelor și nu vă gândiți până în ultima clipă.

Grilă tipografică

Există o mulțime de discuții despre proiectarea în jurul rețelei în HTML și CSS. Probabil înțelegi conceptul de funcționare a rețelelor și măsurarea unui site în pixeli nu este diferit. Acest tutorial de rețea al CSS-Tricks este mai mult un efort ghidat pentru a introduce elementele de bază ale tipografiei pentru era digitală. Este un subiect mult mai avansat în domeniul designului web. Dar dacă aveți răbdare, vă recomand să treceți prin detalii pentru a vedea cum aceste proprietăți ale rețelei pot afecta aspectul paginii dvs..

WhatTheFont!

Am gasit cu totii un logo sau o imagine cu un font foarte neidentificat. Ceva TheFont a făcut runde pe Internet pentru câțiva ani și este încă un favorit al meu. Alegeți o imagine pe care să o încărcați și scriptul va analiza textul din imagine pentru a se potrivi cu orice tip de text similar. Aplicația vă va conecta chiar și la produse externe, unde puteți achiziționa fiecare font în mod corespunzător.

Calculator de bază / linie înălțime

În cele din urmă, o unealtă foarte puternică pentru generarea proprietăților înălțimii și a ritmului liniei. Doar introduceți valori pentru dimensiunea fontului de bază și înălțimea liniei sau includeți propriul cod CSS personalizat în lateral. Aplicația va genera previzualizări în câteva stiluri diferite, astfel încât să puteți obține o imagine a modului în care aceste proprietăți ar arăta pe propriul dvs. site web.