Vaikka varsinkin DW:llä tehdessä voi aloittelija luulla, että näitä asioita ei tarvitse miettiä ja ajatella että ne moni asia tulee ”automaattisesti” oikein. Tai sitten aloittelija ei osaa ylipäänsä vielä ajatella, mikä on typografisesti paremman näköistä.

Typografiaa joutuu säätämään aika paljon, jos haluaa hyvännäköisiä sivuja ilman yllätyksiä, vieläpä hyvännäköisinä eri näytöillä ja selaimilla. Tällä sivulla teen muistiinpanoja aiheista:

  1. Välistys; kirjainväli, sanaväli, rivinväli, palstaväli
  2. Erikoismerkit
  3. Rivitys ja tavutus
  4. Sommittelu, väritys, fontit
  5. Tavallisimmat virheet nettisivujen typografiassa
  6. Sommittelun ja luettavuuden keskeisimpiä kysymyksiä tekijälle

1. Välistys

  • Tekstin merkkien välinen toisistaan etäisyys vaaka- tai pystysuunnassa toisistaan
  • Sanojen välinen etäisyys toisistaan
  • Tietyn merkkiparin välinen etäisyys toisistaan
  • Palstojen välinen etäisyys toisistaan

Englanniksi
(On hyvä tietää englanninkieliset termit, jos käyttää Adobea englannin kielellä, kuten monet tykkäävät)

  • yleinen merkkien välinen etäisyys =spacing
  • tietyn merkkiparin etäisyyden säätö = kerning
  • kirjasinten välistys tasaisin tai visuaalisesti harmonisin välein= letterspacing, tracking

Rivinväli

  • Otsikoissa käytetään pienempää riviväliä kuin leipätekstissä, jotta ne näyttäisivät yhtenäisiltä. Isolla näytöllä otsikko tuskin jakautuu kahdelle riville, mutta kännykässä kyllä, joten otsikon rivinväli kannattaa säätää pienemmäksi joka tapauksessa.
  • Suuraakkoset voidaan rivittää tiiviimmin kuin pienaakkoset
  • On tarkistettava, etteivät ylä- ja alapidennykset osu toisiinsa

Kirjainväli

  • Monet päätteettömät fontit vaativat suuremmassa koossa merkkivälien tiivistämistä ja joskus joidenkin merkkiparien hienosäätöä
  • Päätteellisiä fontteja ei yleensä voi tiivistää, koska kirjainmuotojen päätteet menisivät yhteen. Päätteellisiä otsikoita voi kuitenkin joutua harventamaan, se on itse asiassa klassinen tyylikeino, joka on peräisin jo latinalaisten aakkosten alkulähteiltä ja roomalaisten kiveen hakkaamista kirjaimista.
  • Metric/Optical -kirjainvälistys
    • Metric -kirjainvälistys käyttää fontin sisäänrakennettua välistystaulukkoa. Metric sisältää valmiita parivälistysasetuksia ja sopii käytettäväksi leipätekstissä.
    • Optical -parivälistys säätää peräkkäisten merkkien väliä niiden ulkoasun perusteella ja sopii käytettäväksi otsikoissa, ja jos käytössä on kaksi eri fonttia

Otsikon ja kappaleiden välisiä säätöjä

                                      

Väliotsikon jälk. teksti kpl saadaan lähelle otsikkoa

h2, h3                (väliotsikot h2 ja h3)                 margin-top0;   (margin-top0 ottaa oletusmarginaalin pois)                             

h2 + p                (välittömästi h2-väliotsikon jälkeen tuleva tekstikappale)     margin-top0;                                                          

h2+p, h3+ul     (h2:n jälkeen tuleva kappale sekä h3:n jälkeen tuleva luettelo)             margin-top0;                                      

h2                        (h2 väliotsikot)                            margin-top 44px; margin-bottom:0px;    h2~p                   (alaotsikkoa seuraavalta tekstikappaleelta ylämarginaali pois vaikka välissä olisi kuva)
aaltomerkki tulee alt gr- näppäin ja enterin vas. puolella oleva näppäin jossa aaltomerkki ym
– paina ensin ne molemmat ja sitten vaan se toinen …tai jotenkin niin se tulee
          margin-top0; vai periytyykö?

2. Erikoismerkeistä, ääkkösistä, numeroista

  • Osan erikoismerkeistä saa näppäiltyä suoraan näppäimistöltä ja osan ei, ne joita ei saa, löytää koodit netistä
  • Erikoismerkkien kanssa täytyy myös miettiä mahdollisia rivijako-ongelmia, ettei selain jakaisi esimerkiksi numeroa ja mittayksikköä eri-riveille tai katkaisisi numerosarjaa hassusti keskeltä. Seuraavassa kappaleessa (3) käsitellään rivitystä.
  • Ääkköset eli ä ja ö -kirjaimet voi olla hyvä kirjoittaa html:ään erikoismerkkeinä, ettei nettisivulla tule ikäviä yllätyksiä, ks. entiteettitaulukosta, DW osaa myös tarjota kun alkaa kirjoittamaan merkillä &
  • Netissä täytyy muistaa yleiset erikoismerkkejä(kin) koskevat typografiasäännöt, tärkeimpiä ja
    • useimmin vastaan tulevia on pitkä/lyhyt viiva -käyttö, päivämäärien ja kellonaikojen merkitä
      • ajatusviiva = pitkä viiva (–) ja yhdysmerkki = lyhyt viiva (-)
        • Suositeltu ja paras tapa kirjoittaa aukioloajat on pitkällä viivalla ilman välejä: ma–pe klo 8–15.30. Itse kyllä yleensä laitan ihan ohuet tyhjät välit viivojen molemmille puolille. Lyhyet viivat eivät ole täysin väärin tässä, mutta sillon täytyy laittaa ne tyhjät välit
        • Kellonajat kannattaa kirjoittaa ilman turhia tasatuntien tuplanollia. Etunollaa voi sen sijaan käyttää selvyyden vuoksi yötunneista (esim. klo 14.30–02). Tunnit ja minuutit erotetaan mieluummin pisteellä kuin kaksoispisteellä.
        • Päivämäärät kirjoitetaan ilman turhia etunollia päivissä ja kuukausissa sekä ilman turhaa toistoa vuodessa, jos ajankohta on saman vuoden aikana. Kuukausien perään tulee pisteet. Ajankohtien välit kirjoitetaan joko pitkällä viivalla ilman välejä tai lyhyellä viivalla välien kanssa.
          • 1.1.–12.12.2012 tai 1.1. – 12.12.2012
        • Jos tapahtuma järjestetään kuluvana vuonna, kannattaa miettiä, onko vuotta tarpeen tuoda esille lainkaan. Jossain tapauksessa voi säästää tilaa tai näyttää typografisesti paremmalta ilman.

https://webcgi.oulu.fi/oykk/abc/kielenhuolto/oikeinkirjoitus/valimerkit/ajatusviiva/

3. Rivitys+tavutusongelmat

  • Rivinvaihto ja tavutus ovat nettisivulla kinkkinen asia!
  • Automaattinen rivitys ja tavutus jakaa sanoja hassusti, varsinkin kun erilaisilla selaimilla ja erikokoisilla näytöillä ne tietenkin toimivat eri tavoin.
  • Suomen kielessä on pitkiä sanoja
    • leipätekstissä voi määritellä tavutuksen päälle, jotta palstaan ei tule suuria aukkoja
    • otsikossa voi määritellä tavutuksen pois, jotta sanat eivät katkea hassusti
    • tekstissä voi antaa tavutukseen
      • vihjeitä sellaisen sanan tavutuskohtiin joissa on optimaalista jakaa sana, jos ko. sana kapeammassa näytössä rivittyisi eri riveille
      • kieltoja sellaisten sanojen tai merkkien väliin joissa ei haluta että ne katkeavat eri riveille
        • Riippuu selaimesta toimiiko vai ei!
  • Pakotettu rivivaihto.
    • <br> -tagia käytetään kun halutaan päättää rivi, mutta ei haluta aloittaa uutta kappaletta, aikaansaa pakotetun rivinvaihdon kohtaan johon se sijoitetaan.
  • Pakotettuja tavuviiva
    • Ongelmana on se että kun tekstiä katsotaan eri leveyksisissä näytöissä, pakotetut tavuviivat rivittyvät lähes poikkeuksetta väärin.

https://caniuse.com/css-hyphens

5. Sommittelu, väritys, fontit

  • Nettisivulla pätee typografian yleiset ”säännöt”, niihin löytyy ohjeita ja vinkkejä muualta pilvin pimein. Tuolla alempana kuvien jälkeen: yleisimpiä virheitä ja kysymysiä
  • Samalla sivulla ei kannata käyttää enempää kuin 2-3 väriä
  • Väritys ei saa haitata luettavuutta
  • Väritystä miettiessä oltava mielessä sivujen aihe, kohderyhmä ja nettisivujen trendit
  • Väritys on jatkuttava loogisena kaikilla sivuilla
  • Samoin fontit on valittava aiheeseen sopivasti, huomioitava siinäkin samat asiat kuin värityksessä
  • Samalla sivulla ja sivustolla vain korkeintaan kahta eri fonttia, joiden täytyy sopia toisiinsa
Esimerkiksi Pinterestissä ja Instagramissa löytyy valmiksi mietittyjä väriyhdistelmiä ja fonttiyhdistelmiä.
Olen täysin samaa mieltä tämän banned fonts listan tekijän kanssa. Siinä on kyllä muutama, jota olen joskus käyttänyt ainakin jossain printtihommassa, mutta en käyttäisi enää, koska niillekin on nykyään paremman näköisiä versioita.
Samoin Hobo-fintti jääköön sille sirkukselle, joka sitä käyttää- Tai itse asiassa voisi kyllä myös myös jättää sen jo pois.

Hyviä fonttiyhdistelmiä nettisivuille esimerkiksi

Tavallisia typografisia virheitä nettisivulla

Tässä tietolähteenä muun muassa nettiguru Jukka K. Korpela, jonka nettisivuja kannattaa tutkia.

  • Lliian pieni fontti
  • Liian pieni rivinväli (tai liian iso esim. jos otsikko rivittyy useammalle riville kapeassa näytössä)
  • Tasattu palsta oloissa, joissa se ei voi toimia
  • Alueensa reunoihin (kehyksiin, väripohjiin) törmäilevä teksti
  • Raju liehureuna oikealla
  • Liian pieni kontrasti tekstin ja taustan välillä
  • Yleinen ahtaus ja kirjavuus
  • Liikaa eri fontteja ja tehosteita
  • Otsikot eivät erotu
  • Merkkien käyttövirheet, esim. viiva-ajatusviiva

Sommittelun, visuaalisen ulkonäön ja luettavuuden kysymyksiä

  • Erottuvatko toiminnallisesti erilaiset osat toisistaan?
  • Ovatko navigointialueet tunnistettavissa, erottuvat riittävästi leipätekstistä?
  • Ovatko palstaleveydet sopivia, ei liian leveitä/kapeita?
  • Onko luettavuus hyvä kaikissa palstoissa?
  • Jos navigointipalkin tausta on tumma ja teksti vaalea, pitäisikö tekstin olla lihavampaa?
  • Ovanko väritys aiheeseen sopiva, tasapainoinen, looginen, nykyaikainen, sopivan hillitty/sopivan mielenkiintoinen?
  • Muodostaako sivu tasapainoisen kokonaisuuden?