Oppiskele Tekstin Muotoilutekniikat Luettavuuden Parantamiseksi

line-height

line-height määrittää pystysuoran välin tekstirivien välillä. Selaimet asettavat oletusarvon fontin perusteella, mutta voit mukauttaa sitä useilla eri tavoilla:

line-height: multiplier | value in px | value in em | percent

multiplier yksikötön arvo, kuten 1.5, kertoo font-size-arvon;
value in px tarkka korkeus, esim. 24px;
value in em suhteellinen arvo, kuten kerroin (1.4em = font-size × 1.4);
percent toimii kuten kerroin (120% = font-size × 1.2).

index.html

styles.css

Tuloste

letter-spacing

letter-spacing määrittää vaakasuuntaisen välin merkkien välillä.

letter-spacing: normal | value in px | value in em

normal: oletusväli;
value in px: kiinteä lisäväli;
value in em: väli suhteessa font-size-arvoon.

index.html

styles.css

Tuloste

word-spacing

word-spacing säätää sanojen välistä etäisyyttä.

word-spacing: value | inherit | normal

value: mukautettu väli;
inherit: käyttää ylätason elementin väliä;
normal: oletusväli.

index.html

styles.css

Tuloste

text-shadow

text-shadow lisää varjoja tekstiin. Se hyväksyy neljä arvoa:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: vaakasuuntainen siirtymä;
Y set: pystysuuntainen siirtymä;
blur radius: varjon pehmeys (0 = terävä);
color: mikä tahansa kelvollinen väri, oletuksena nykyinen tekstin väri.

index.html

styles.css

Tuloste

Huomautus

Tekstin muotoilussa ei ole tiukkoja sääntöjä, jotka määräävät, mitä arvoja on käytettävä tietyissä tilanteissa. Tekstin muotoiluominaisuuksien ja arvojen valinta riippuu kunkin projektin yksilöllisistä vaatimuksista ja suunnittelun visiosta.

1. Mitä CSS-ominaisuutta käytetään luomaan visuaalinen tehoste, joka lisää varjon tekstiin?

2. Mikä CSS-ominaisuus säätää sanojen välistä etäisyyttä tekstissä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 2

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Pyyhkäise näyttääksesi valikon

line-height

line-height määrittää pystysuoran välin tekstirivien välillä. Selaimet asettavat oletusarvon fontin perusteella, mutta voit mukauttaa sitä useilla eri tavoilla:

line-height: multiplier | value in px | value in em | percent

multiplier yksikötön arvo, kuten 1.5, kertoo font-size-arvon;
value in px tarkka korkeus, esim. 24px;
value in em suhteellinen arvo, kuten kerroin (1.4em = font-size × 1.4);
percent toimii kuten kerroin (120% = font-size × 1.2).

index.html

styles.css

Tuloste

letter-spacing

letter-spacing määrittää vaakasuuntaisen välin merkkien välillä.

letter-spacing: normal | value in px | value in em

normal: oletusväli;
value in px: kiinteä lisäväli;
value in em: väli suhteessa font-size-arvoon.

index.html

styles.css

Tuloste

word-spacing

word-spacing säätää sanojen välistä etäisyyttä.

word-spacing: value | inherit | normal

value: mukautettu väli;
inherit: käyttää ylätason elementin väliä;
normal: oletusväli.

index.html

styles.css

Tuloste

text-shadow

text-shadow lisää varjoja tekstiin. Se hyväksyy neljä arvoa:

text-shadow: "X set" | "Y set" | "blur radius" | "color"

X set: vaakasuuntainen siirtymä;
Y set: pystysuuntainen siirtymä;
blur radius: varjon pehmeys (0 = terävä);
color: mikä tahansa kelvollinen väri, oletuksena nykyinen tekstin väri.

index.html

styles.css

Tuloste

Huomautus

1. Mitä CSS-ominaisuutta käytetään luomaan visuaalinen tehoste, joka lisää varjon tekstiin?

2. Mikä CSS-ominaisuus säätää sanojen välistä etäisyyttä tekstissä?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 2. Luku 2