Typografian ymmärtäminen 10 Hyödyllisiä työkaluja ja resursseja
Viimeisessä artikkelissani Understanding Typography kirjoitin, mitä tulee typografian suunnitteluun ja miten manipuloida sitä parantamaan sivustosi ulkoasua ja parantamaan käyttäjäkokemusta. Tässä artikkelissa olen listalla 10 suosikkityökalua typografiaan verkossa.
Nämä voivat auttaa HTML-verkkojen ja sisältöalueiden rakentamisessa, CSS-tyylien luomisessa, fonttien nimien luomisessa ja joukossa muita hienoja juttuja. Tutustu alla oleviin linkkeihin ja ilmoita meille ajatuksiane keskustelualueella.
Suositeltava lukeminen: Typografian ymmärtäminen: Web-kirjoittaminen
Fontimatriisi
Tämä online-opas on lähettänyt 24 tunnin suunnittelupalvelun. Siinä on matriisitaulukko kaikista tavallisista web-fonteista, jotka löydät oletuksena eri ohjelmistotoimittajilta. Suosittuja nimikkeitä ovat Windows, Mac OS X, Microsoft Office ja Adobe Creative Suite -ohjelmat.
Värin kontrasti Tarkista
Värikontrasti on usein ongelma, kun yrität harjoittaa standardin mukaista mustavalkoista mallia. Kun löydät ottelun, se tuntuu suunnittelun täydellisyydeltä. Huono väriyhdistelmävalinta näyttää kuitenkin hyvin huonolta ja vaikuttaa negatiivisesti kokonaissuunnitteluun. Tämä pieni verkkotyökalu voi auttaa valitsemaan joukon värejä, jotka vastaavat toisiaan minkä tahansa tyylisuunnittelun suhteen.
HTML-Ipsum
Tarvitsetko Lorem Ipsum -työkalun, joka voi tehdä enemmän kuin vain tekstin tulostaminen? Tämä online-HTML-generaattori luo koodilohkoja yleisimmille sivuelementeille. Joitakin esimerkkejä ovat järjestämättömät luettelot, määrittelyluettelot, web-lomakkeet, taulukot ja paljon muita ratkaisuja.
Typechart
Typechart on yksi suosituimmista työkaluistani CSS-kehittäjänä. Odotan usein, että järjestelmässäni on tietty fontti web-projektiin, mutta minulla ei ole aikaa lähteä läpi koko kokoelmani. Tämä mahtava työkalu antaa sinulle mahdollisuuden seuloa suosituimpia fonttiperheitä ja jopa ladata oikean CSS-koodin!
PX-to-EM.com
Jos et nollaa oletusselaimen tekstikokoa, sinulla on ongelmia, jotka vastaavat ems-pikseleitä pikseleillä. Tämä selaimessasi oleva sovellus tarjoaa sekä muunnostaulukon että käyttöliittymän px-em. Se on varsin yksinkertainen työkalu, mutta se tarjoaa kätevän oppaan, jossa on todella yksinkertaisia toimintoja - ja et voi voittaa ilmaista hintalappua.
CSS-tyypin asetus
En suosittele, että CSS-tyypin asetukseksi pidetään liian kauan, koska se on todella aloittelijan työkalu. Sen avulla voit luoda CSS-koodia valitsemiesi tiettyjen fonttiominaisuuksien perusteella. Vaikka se on aluksi erittäin hyödyllistä, siitä tulee ajan myötä kainalosauva. Ja et pysty motivoimaan hallitsemaan CSS-ominaisuuksia itse. Mutta jos haluat säästää aikaa projektissa, tätä työkalua ei voi unohtaa.
tyypillinen kääntäminen
Tässä on yksi todella ainutlaatuinen esimerkki fontin esikatselukirjastosta. tyypillinen kääntäminen sisältää kourallisen fontteja, jotka ovat luontaisia käyttöjärjestelmälle. Se skannaa automaattisesti fonttiluettelosi ja poimii eniten web-turvallisia ratkaisuja. Voit vertailla niitä vierekkäin ja valita helposti suosikkiasetusten välillä. Tämä on toinen loistava aikaa säästäjä, jonka kirjanmerkki on, eikä ajattele viimeiseen minuuttiin asti.
Typografinen ruudukko
HTML- ja CSS-verkkojen suunnittelusta puhutaan paljon. Ymmärrät todennäköisesti käsitteen siitä, miten verkot toimivat, ja verkkosivuston mittaaminen pikseleinä ei ole erilainen. Tämä CSS-Tricksin esittämä verkko-opetus on enemmän kuin ohjattu pyrkimys tuoda esiin digitaalisen aikakauden typografian perusteet. Se on paljon kehittyneempi aihe web-suunnittelun alalla. Mutta jos sinulla on jonkin verran kärsivällisyyttä, suosittelen käymään läpi yksityiskohdat nähdäksesi, miten nämä ruudukon ominaisuudet voivat vaikuttaa sivusi asetteluun.
WhatTheFont!
Olemme kaikki löytäneet logon tai kuvan, jossa on todella hienoja tunnistamattomia fontteja. WhatTheFont on tehnyt kierroksia Internetissä muutaman vuoden ajan ja se on edelleen suosikkini. Voit valita ladattavan kuvan ja niiden skripti analysoi kuvan sisältämää tekstiä vastaamaan samankaltaisia kirjasimia. Sovellus yhdistää sinut myös ulkoisiin tuotteisiin, joissa voit ostaa kunkin fontin avuksesi.
Baseline / Line-Height Calculator
Lopuksi todella tehokas työkalu linjan korkeuden ja rytmin ominaisuuksien tuottamiseen. Syötä vain perusfonttikoon ja rivikorkeuden arvot tai sisällytä oma mukautettu CSS-koodi sivulle. Sovellus luo esikatselukuvia muutamalla eri tyylillä, jotta voit saada käsityksen siitä, miten nämä ominaisuudet näkyvät omalla verkkosivustolla.
