Tipogrāfijas izpratne 10 Noderīgi rīki un resursi

Savā pēdējā rakstā par Typography izpratni es rakstīju par to, kas notiek tipogrāfijas projektēšanā un kā to manipulēt, lai uzlabotu jūsu vietnes izkārtojumu un uzlabotu lietotāju pieredzi. Šajā rakstā es esmu sarakstā 10 no maniem iecienītākajiem tipogrāfijas rīkiem tīmeklī.

Tie var palīdzēt veidot HTML režģus un satura apgabalus, veidojot CSS stilus, radot fontu nosaukumus un citu jauku sīkumu. Iepazīstieties ar zemāk redzamajām saitēm un noteikti informējiet mūs par savām domām pēc diskusiju jomā.

Ieteicamais lasījums: Tipogrāfijas izpratne: rakstīšana tīmeklī

Fonta matrica

Šo tiešsaistes rokasgrāmatu publicēja 24 stundu dizaina emuārs. Tajā ir matricas tabula, kurā ir visi standarta tīmekļa fonti, kurus pēc noklusējuma atradīsiet no dažādiem programmatūras piegādātājiem. Populāri nosaukumi ietver Windows, Mac OS X, Microsoft Office un Adobe Creative Suite programmas.

Krāsu kontrastu pārbaude

Krāsu kontrasts bieži vien ir problēma, kad jūs veicat ārpus standarta melnbalto modeli. Kad atrodat spēli, tas jūtas kā dizaina pilnība. Tomēr slikta krāsu kombinācijas izvēle izskatās ļoti slikta un negatīvi ietekmēs kopējo dizainu. Šis mazais tīmekļa rīks var palīdzēt izvēlēties krāsu kopu, lai tie atbilstu jebkuram stila izkārtojumam.

HTML-Ipsum

Vai jums ir nepieciešams Lorem Ipsum rīks, kas var darīt vairāk nekā tikai izdrukāt tekstu? Šis tiešsaistes HTML ģenerators izveidos kodu blokus visbiežāk lietotajiem lapas elementiem. Daži piemēri ir neierobežoti saraksti, definīciju saraksti, tīmekļa veidlapas, tabulas un daudzi citi risinājumi.

Typechart

Typechart ir viens no maniem iecienītākajiem rīkiem kā CSS izstrādātājs. Es bieži meklēju, lai atbilstu konkrētam fontam manā sistēmā ar interneta projektu, bet man vienkārši nav laika, lai pārvērstu visu savu kolekciju. Šis awesome rīks ļauj jums izsijāt, izmantojot populāras fontu saimes izvēles un pat lejupielādēt pareizo CSS kodu!

PX-to-EM.com

Ja vien jūs atiestatīsiet noklusējuma pārlūkprogrammas teksta izmēru, iespējams, būs problēmas, kas atbilst ems ar pikseļiem. Šī pārlūkprogrammā esošā lietotne nodrošina gan reklāmguvumu tabulu, gan lietotāja interfeisu, lai attēlotu px. Tas ir ļoti vienkāršs rīks, bet tas piedāvā ērtu rokasgrāmatu ar ļoti vienkāršu funkcionalitāti - un jūs nevarat pārspēt bezmaksas cenu.

CSS tipa iestatījums

Es neiesakām pārāk ilgi uzlikt CSS Type Set, jo tas ir patiesi iesācēja rīks. Tas ļauj jums ģenerēt CSS kodu, pamatojoties uz konkrētām izvēlētajām fontu īpašībām. Kaut arī sākumā tas ir ļoti noderīgs, laika gaitā tas kļūst par kruķi, kas balstās. Un jūs nevarēsiet motivēt paši apgūt CSS īpašības. Bet, ja jums ir nepieciešams ietaupīt laiku projektam, šo rīku nevar ignorēt.

tipisks flipping

Šeit ir viens patiesi unikāls fonta priekšskatījuma bibliotēkas paraugs. Flipping tipisks ietver nedaudz fontu, kas ir dzimtā jūsu operētājsistēmā. Tā automātiski skenē jūsu fontu direktoriju, lai iegūtu visvairāk interneta drošus risinājumus. Jūs varat salīdzināt tos blakus un viegli izvēlēties starp savām iecienītākajām iespējām. Tas ir vēl viens lielisks laika taupīšanas līdzeklis, kuru jūs grāmatzīmi un nedomājat par pēdējo brīdi.

Tipogrāfiskais režģis

Ir daudz runāt par projektēšanu ap tīklu HTML un CSS. Jūs, iespējams, sapratīsiet, kā darbojas tīkli, un tīmekļa vietnes mērīšana pikseļos nav atšķirīga. Šī CSS-Tricks piedāvātā tīkla apmācība ir vairāk kā vadīts darbs, lai ieviestu digitālā laikmeta tipogrāfijas pamatus. Tas ir daudz progresīvāks temats web dizaina jomā. Bet, ja jums ir kāda pacietība, es iesaku iet cauri detaļām, lai redzētu, kā šīs tīkla īpašības faktiski var ietekmēt jūsu lapas izkārtojumu.

Ko tas nozīmē!

Mēs visi esam atraduši logotipu vai attēlu ar dažiem tiešām neaizmirstamiem fontiem. Kas jau vairākus gadus ir veikusi internetā, tas joprojām ir mans mīļākais. Jūs izvēlaties augšupielādējamo attēlu, un viņu skripts analizēs attēlā redzamo tekstu, lai tas atbilstu jebkurām līdzīgām burtiem. Lietojumprogramma pat savienos jūs ar ārējiem produktiem, kur jūs varat iegādāties katru fontu.

Bāzes līnijas / līnijas augstuma kalkulators

Visbeidzot, patiešām spēcīgs instruments līnijas augstuma un ritma īpašību radīšanai. Vienkārši ievadiet bāzes fontu lieluma un līnijas augstuma vērtības, vai arī pievienojiet savu pielāgoto CSS kodu pie sāniem. Lietojumprogramma radīs priekšskatījumus dažos dažādos stilos, lai jūs varētu iegūt priekšstatu par to, kā šīs īpašības izskatīsies jūsu tīmekļa vietnē.