oli se sitten puhelimissamme, kirjoissa tai nettisivuilla, sulattelemme jatkuvasti kirjoitettuja sanoja. Kirjakkeita on kaikkialla ympärillämme. Pohdimme usein kirjoitetun sanan voimaa, mutta harvoin pohdimme suunnittelijan roolia sanan tai lauseen sävyn jäljittelemisessä.
kulissien takana suunnittelija on ottanut aikaa pohtiakseen tekstin ulkonäön ja sen, mitä tekstissä sanotaan. Todellisuudessa erilaisia tunnelmia, tunnelmia ja tunteita voidaan ilmaista yksinkertaisesti tyyppivalinnan kautta. Mutta mitä typografia oikeastaan on-ja miksi se on niin tärkeää?
tässä artikkelissa nostamme kannen kaikesta, mitä sinun tarvitsee tietää typografiasta. Aloitamme typografian määrittelyllä, mukaan lukien lyhyt historia sen alkuperästä. Käsittelemme sitten hyvän typografian etuja ja vaikutuksia, joita sillä voi olla käyttäjiisi. Lopuksi tarkastelemme eri elementtejä, jotka muodostavat typografia, ja mitä ne kaikki tarkoittavat.
Here ’s what we’ ll cover:
- mikä on typografia?
- miksi typografia on tärkeää?
- typografian eri elementit
- Miten valita oikea kirjasintyyppi verkkosivuillesi
- johtopäätös
valmis? Sukelletaan!
mikä on typografia?
aloitetaan perusasioilla: mitä typografia oikeastaan on? Typografia on pohjimmiltaan kirjainten ja tekstin järjestämistä siten, että kopio on luettavissa, selkeä ja visuaalisesti lukijaan vetoava. Typografiaan kuuluu kirjasintyyli, ulkonäkö ja rakenne, jolla pyritään herättämään tiettyjä tunteita ja välittämään tiettyjä viestejä. Lyhyesti sanottuna typografia herättää tekstin eloon.
alla olevalla videolla CareerFoundry UI design mentor Olga nostaa kantta siitä, miksi typografialla on väliä—ja mitä merkitystä sillä on käyttäjille.
typografia voidaan ajoittaa 1000-luvulle, irtokirjakkeiden innovaation aikaan. Ennen digiaikaa typografia oli kirjoihin ja lehtiin ja lopulta julkisiin teoksiin liittyvä erikoisala. Ensimmäinen esimerkki typografiasta löytyy Gutenbergin Raamatusta, joka käynnisti typografian vallankumouksen lännessä. Hauska fakta: Gutenbergin Raamatussa käytetty kirjoitustyyli tunnetaan nyt nimellä Textura, ja löydät sen fontin pudotusvalikosta suurissa työpöytäsovelluksissa tänään!
Pikakelataan nykypäivään, jossa typografia liitetään useimmiten sekä Digimaailmaan että printtiin. Internetin syntyessä syntyi typografian luova räjähdys. Yhtäkkiä web-suunnittelijoilla oli käytössään runsaasti fontteja ja tyyppivaihtoehtoja, mikä teki typografiasta visuaalisesti monipuolisemman kuin koskaan ennen.
miksi typografia on tärkeää?
Typografia on niin paljon muutakin kuin kauniiden fonttien valitsemista: se on olennainen osa käyttöliittymäsuunnittelua. Hyvä typografia luo vahvan visuaalisen hierarkian, tarjoaa graafisen tasapainon verkkosivustolle ja asettaa tuotteen yleisen sävyn. Typografian pitäisi ohjata ja informoida käyttäjiä, optimoida luettavuus ja saavutettavuus sekä varmistaa erinomainen käyttökokemus.
kaivetaanpa hieman syvemmälle siihen, miksi typografia on niin tärkeää.
typografia luo brändin tunnettuutta
hyvä typografia ei ainoastaan paranna sivuston persoonallisuutta, vaan käyttäjäsi alkavat alitajuisesti yhdistää sivustossasi olevaa kirjasintyyppiä brändiisi. Ainutlaatuinen, johdonmukainen typografia auttaa sinua luomaan vahvan käyttäjän seuraavat, rakentaa luottamusta käyttäjien kanssa, ja auttaa kuljettamaan tuotemerkin eteenpäin.
typografia vaikuttaa päätöksentekoon
typografia vaikuttaa syvällisesti siihen, miten käyttäjät sulattavat ja hahmottavat tekstin välittämää tietoa. Katseenvangitsija on paljon vakuuttavampi kuin heikot fontit, jotka eivät vahvista tekstin sanomaa.
typografia kiinnittää lukijoiden huomion
hyvä typografia voi olla se ero, että joku viipyy verkkosivuillasi minuutin tai puoli tuntia. On tärkeää, että sivustosi on visuaalisesti stimuloiva ja mieleenpainuva, ja typografia on valtava rooli tässä prosessissa.
typografian eri elementit
päästäkseen typografian pariin on ensin tutustuttava kahdeksaan olennaiseen typografiseen muotoiluelementtiin.
kirjasimet ja kirjasintyypit
kirjasintyyppien ja kirjasintyyppien välillä on jonkin verran sekaannusta, ja monet pitävät näitä kahta synonyyminä. Kirjasintyyppi on suunnittelutyyli, joka käsittää lukemattomia erikokoisia ja-painoisia merkkejä, kun taas fontti on tekstimerkin graafinen esitys. Yksinkertaisesti sanottuna kirjasintyyppi on kirjasinperhe, kun taas kirjasimet viittaavat painoihin, leveyksiin ja tyyleihin, jotka muodostavat kirjasintyypin.
kirjasintyyppejä on kolme perustyyppiä: serif, sans-serif ja dekoratiivinen. Jotta käyttöliittymä pysyisi selkeänä ja virtaviivaisena, hyvä suunnittelija ei käytä koskaan enempää kuin kolmea fonttia—ja pitää koristefontit minimissä. Useimmat KÄYTTÖLIITTYMÄSUUNNITTELIJAT yhdistävät serif-fontit sans-serif-fontteihin, kuten päätekstin laittaminen serif-fonttiin ja otsikon laittaminen sans-serif-fonttiin tai päinvastoin.
kontrastin
paljon hierarkian kaltainen kontrasti auttaa välittämään lukijoilleen, mitä ajatuksia tai sanomaa haluaa korostaa. Kontrasti tekee tekstistäsi kiinnostavan, merkityksellisen ja huomiota herättävän. Useimmat suunnittelijat luovat kontrastia leikkimällä vaihtelevilla kirjasintyypeillä, väreillä, tyyleillä ja kooilla luodakseen vaikutusta ja hajottaakseen sivun.
johdonmukaisuus
kirjasintyyppien pitäminen yhdenmukaisina on avain hämmentävän ja sotkuisen käyttöliittymän välttämiseen. Kun välittää tietoa, on tärkeää pysyä samalla fontti tyyli, jotta lukijat heti ymmärtää, mitä he lukevat, ja alkaa huomata kuvio. Vaikka on ok leikkiä hierarkiatasoilla jossain määrin, on hyvä käytäntö luoda yhtenäinen kirjasintyyppien hierarkia (yksi johdonmukainen fontti otsikoille, toinen alaotsikoille) ja pitää siitä kiinni.
valkoinen tila
kutsutaan usein ”negatiiviseksi avaruudeksi”, valkoinen tila on tekstiä tai grafiikkaa ympäröivä tila. Se on usein unohdetaan ja taipumus jäädä huomaamatta käyttäjä, mutta oikea käyttö valkoinen tila varmistaa käyttöliittymä on uncluttered ja teksti on luettavissa. Valkoinen tila voi jopa kiinnittää huomiota tekstiin ja tarjoaa kaiken kaikkiaan esteettisesti miellyttävän kokemuksen. Valkoinen tila muodostuu usein marginaaleista, pehmusteista tai vain alueista, joissa ei ole tekstiä tai grafiikkaa.
tasaus
tasaus on prosessi, jossa yhdistellään tekstiä, grafiikkaa ja kuvia, jotta varmistetaan, että kunkin elementin välillä on yhtä suuri tila, koko ja etäisyydet. Monet KÄYTTÖLIITTYMÄSUUNNITTELIJAT luovat marginaaleja varmistaakseen, että niiden logo, otsikko ja tekstin runko ovat linjassa keskenään. Kun mukautat käyttöliittymää, on hyvä käytäntö kiinnittää huomiota alan standardeihin. Esimerkiksi tekstin kohdistaminen oikealle tuntuu vastavaikuttavalta lukijoille, jotka lukevat vasemmalta oikealle.
väri
väri on yksi typografian jännittävimmistä elementeistä. Tässä suunnittelijat voivat todella luovia ja nostaa käyttöliittymän uudelle tasolle. Tekstin väriin ei kuitenkaan pidä suhtautua kevyesti: fontin värin naulaaminen voi saada tekstin erottumaan ja välittämään viestin sävyn —mutta sen vääräksi saaminen voi johtaa sotkuiseen käyttöliittymään ja tekstiin, joka on ristiriidassa sivuston värien kanssa.
värillä on kolme keskeistä komponenttia: arvo, värisävy ja värikylläisyys. Hyvä suunnittelija osaa tasapainottaa nämä kolme osatekijää niin, että teksti on sekä katseenvangitsija että helposti luettavissa myös näkövammaisille. Usein suunnittelijat testaavat tätä katsomalla tekstiä harmaasävynä (ilman väriä) ja tekemällä hienosäätöjä, jos teksti on liian tummaa tai liian vaaleaa taustaväriä vasten.
hierarkia
hierarkian perustaminen on yksi typografian keskeisimmistä periaatteista. Typografinen hierarkia pyrkii luomaan selkeän eron näkyvien, ensin huomattavien ja luettavien kopioiden ja tavallisen tekstikopion välille. Sosiaalisen median tuoman lyhyen huomion aikakaudella suunnittelijoita kehotetaan olemaan tiiviitä ja luomaan kirjasintyyppejä, joiden avulla käyttäjät voivat kuluttaa tarvittavat tiedot lyhyessä ajassa.
hierarkia voidaan luoda mitoituksen, värin, kontrastin ja linjauksen avulla. Esimerkiksi, jos sinulla on rivi kopio huutomerkki kuvake alussa, joka on punaisella ja suurempi kuin edellinen kopio, tämä on visuaalinen vihje lukijoille, että se on kutsu toimintaan. Tyypillisin esimerkki typografisesta hierarkiasta on koko: otsikoiden tulee aina olla suurempia kuin alaotsikoiden ja vakiotekstien.
miten valitset oikean kirjasintyypin verkkosivustollesi?
nyt kun olemme tutustuneet eri typografian elementteihin, puhutaan käyttöliittymäsi kirjasintyyppien valintaprosessista. Kun valittavana on niin monia erilaisia fontteja ja kirjasintyyppejä, on helppo tuntea itsensä ylityöllistetyksi. Oikean valinnan tekeminen riippuu paljon muustakin kuin siitä, että näkee, mikä näyttää kivalta. Seuraavassa muutamia keskeisiä huomioita:
mieti persoonallisuutta
miltä haluat käyttäjiesi tuntuvan, kun he tulevat ensimmäisen kerran verkkosivustollesi. Haluatko matkia ystävällistä ilmapiiriä? Haluatko sivuston tuntuvan korkealuokkaiselta, kutsuvalta, leikkisältä tai vakavalta? On välttämätöntä, että typografia heijastaa brändin tai tuotteen persoonallisuutta. Hyvä lähtökohta tämän haasteen edessä on määritellä brändisi ydinominaisuudet ja alkaa kerätä kirjasintyyppejä, jotka heijastavat näitä ominaisuuksia. Sieltä voit alkaa huomata trendin.
Pohdi sävyä
yhtä tärkeää on pohtia, miten fontti harmonisoituu viestin sävyn kanssa. Jos haluat esimerkiksi välittää vakavaa tai tärkeää tietoa, valitse vähemmän tyylitelty tai koristeellinen fontti, joka on sekä selvästi luettavissa että rajoittaa häiriötekijöitä.
älä kitsastele funktiolla
funktio on yhtä tärkeä kuin muoto: ei ole mitään pahempaa kuin verkkosivusto, joka näyttää kauniilta mutta on täysin lukukelvoton, mikä saa sinut klikkaamaan väärää nappia tai kääntymään väärään suuntaan, koska ohjeet olivat epäselvät. Kun päätät, mitä kirjasintyyppejä sisällytetään käyttöliittymään, aseta tyyli, esteettisyys ja ääni syrjään ja mieti, onko fontti luettavissa, luettavissa ja käytettävissä. Voiko teksti olla luettavissa ilman rasitusta? Ovatko hahmot tarpeeksi erillisiä?
harkitse suorituskykyä
yksi asia, joka monelta suunnittelijalta usein jää huomaamatta, on verkkoselaystävällisten kirjasintyyppien valitseminen. Yleisesti käytetyt fonttikirjastot kuten Google fonts tarjoavat web-pohjaisia fonttitiedostoja, jotka voidaan renderoida täydellisesti selaimessa ilman ongelmia. Ammattilaisen vinkki: Kun lataat web-fontteja, älä koskaan lataa enemmän merkistöjä kuin sinun tarvitsee. Näin vältät ylipainon!
inspiroidu
Jos et ole varma, mistä aloittaa, ota aikaa ja katso, mitä muut tekevät. Avaa silmäsi typografialle, jonka näet ympärilläsi. Huomaatko samanlaisia kuvioita? Näetkö hyviä ja huonoja esimerkkejä typografiasta? Jopa seuraavat typografia hashtags sosiaalisessa mediassa tai etsivät typografia Pinterest antaa sinulle hyviä ideoita siitä, mitä siellä. Voit myös etsiä näistä kahdeksasta typografiatrendistä lisää inspiraatiota.
ota aikaa testata
paras tapa tulkita, mitä fonttia käyttöliittymääsi käytetään? Testaa, testaa ja testaa! Keräämällä hyödyllistä palautetta todellisilta käyttäjiltä saat selkeämmän käsityksen siitä, mikä toimii, mikä ei, mikä on luettavissa ja mikä tuntuu vastavaikutteiselta tai kömpelöltä.
johtopäätös
typografia jää usein huomiotta, mutta se on olennainen osa käyttöliittymäsuunnittelua. Mastering typografia näkee sinut hyvin matkalla tulossa fantastinen UI suunnittelija! Jos et ole varma, mistä aloittaa, miksi ei suunnata suosikki sivustoja ja alkaa tehdä muistiin, mitä kirjasintyyppejä he ovat menneet.
innokas oppimaan lisää käyttöliittymäsuunnittelusta? Tsekkaa nämä aiheeseen liittyvät blogikirjoitukset:
- 10 esimerkkiä kauniista blogeista, jotka ovat naulanneet KÄYTTÖLIITTYMÄSUUNNITTELUNSA
- 32 käyttöliittymäelementtiä KÄYTTÖLIITTYMÄSUUNNITTELIJOILLE: ultimate glossary
- näin suunnittelet ikonin tyhjästä: step-by-step guide