Oppiskele Tekstin Muotoilutekniikat Luettavuuden Parantamiseksi

line-height

line-height-ominaisuus määrittää rivin korkeuden ja sitä käytetään usein säätämään tekstirivien välistä tilaa. Oletuksena line-height riippuu tekstin fontista ja selain määrittää sen automaattisesti.

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

multiplier on yksikötön arvo (esim. 1.5). Tällöin rivin korkeus on 1.5 kertaa suurempi kuin font-size-arvo;
value in px on tietty arvo (esim. 24px), johon rivin korkeus asetetaan;
value in em on arvo (esim. 1.4em), joka toimii samalla tavalla kuin multiplier. Selain tarkistaa font-size-arvon, kertoo sen 1.4:llä ja tämä tulos on rivin korkeus;
percent on arvo (esim. 120%), joka toimii kuten multiplier. font-size-arvo kerrotaan 1.2:lla, mikä määrittää rivin korkeuden.

index.html

styles.css

Tuloste

letter-spacing

letter-spacing-ominaisuus määrittää vaakasuoran välin tekstin merkkien välillä.

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

normal on oletusarvoinen merkkien väli;
value in px on tietty arvo, joka lisää ylimääräistä väliä merkkien väliin;
value in em toimii samalla tavalla kuin px, mutta väli on suhteessa font-size-arvoon.

index.html

styles.css

Tuloste

word-spacing

word-spacing-ominaisuus määrittää etäisyyden sanojen välillä tekstissä. Se lisää tilaa sanojen väliin. Jos tekstissä on välimerkkejä, jotka on kirjoitettu yhdessä sanojen kanssa, ne pysyvät yhdessä, koska niiden välissä ei ole tilaa.

word-spacing: value | inherit | normal

value on tietty arvo, joka asettaa tilan sanojen väliin;
inherit perii sanavälin ylätason elementiltä;
normal on oletusarvoinen sanaväli.

index.html

styles.css

Tuloste

text-shadow

text-shadow-ominaisuus lisää varjon tekstiin.

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

X set säätää varjon vaakasijaintia. Positiiviset arvot siirtävät varjoa oikealle, negatiiviset vasemmalle;
Y set säätää varjon pystysijaintia. Positiiviset arvot siirtävät varjoa alaspäin, negatiiviset ylöspäin;
blur radius määrittää, kuinka sumealta varjo näyttää. Suuremmat arvot tekevät varjosta pehmeämmän ja hajanaisemman. Oletusarvo on 0, jos arvoa ei määritetä;
color määrittää varjon värin missä tahansa kelvollisessa väritilassa. Jos väriä ei määritetä, käytetään tekstin väriä oletuksena.

index.html

styles.css

Tuloste

Huomio

Tekstin muotoilussa ei ole tiukkoja sääntöjä, jotka määräävät, mitä arvoja tulee käyttää 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 efekti, 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

Suggested prompts:

Can you explain the difference between line-height, letter-spacing, and word-spacing?

How do I choose the right values for these text properties in my project?

Can you show more examples of using text-shadow with different colors or effects?

Awesome!

Completion rate improved to 2.56

Pyyhkäise näyttääksesi valikon

line-height

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

multiplier on yksikötön arvo (esim. 1.5). Tällöin rivin korkeus on 1.5 kertaa suurempi kuin font-size-arvo;
value in px on tietty arvo (esim. 24px), johon rivin korkeus asetetaan;
value in em on arvo (esim. 1.4em), joka toimii samalla tavalla kuin multiplier. Selain tarkistaa font-size-arvon, kertoo sen 1.4:llä ja tämä tulos on rivin korkeus;
percent on arvo (esim. 120%), joka toimii kuten multiplier. font-size-arvo kerrotaan 1.2:lla, mikä määrittää rivin korkeuden.

index.html

styles.css

Tuloste

letter-spacing

letter-spacing-ominaisuus määrittää vaakasuoran välin tekstin merkkien välillä.

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

normal on oletusarvoinen merkkien väli;
value in px on tietty arvo, joka lisää ylimääräistä väliä merkkien väliin;
value in em toimii samalla tavalla kuin px, mutta väli on suhteessa font-size-arvoon.

index.html

styles.css

Tuloste

word-spacing

word-spacing: value | inherit | normal

value on tietty arvo, joka asettaa tilan sanojen väliin;
inherit perii sanavälin ylätason elementiltä;
normal on oletusarvoinen sanaväli.

index.html

styles.css

Tuloste

text-shadow

text-shadow-ominaisuus lisää varjon tekstiin.

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

X set säätää varjon vaakasijaintia. Positiiviset arvot siirtävät varjoa oikealle, negatiiviset vasemmalle;
Y set säätää varjon pystysijaintia. Positiiviset arvot siirtävät varjoa alaspäin, negatiiviset ylöspäin;
blur radius määrittää, kuinka sumealta varjo näyttää. Suuremmat arvot tekevät varjosta pehmeämmän ja hajanaisemman. Oletusarvo on 0, jos arvoa ei määritetä;
color määrittää varjon värin missä tahansa kelvollisessa väritilassa. Jos väriä ei määritetä, käytetään tekstin väriä oletuksena.

index.html

styles.css

Tuloste

Huomio

Tekstin muotoilussa ei ole tiukkoja sääntöjä, jotka määräävät, mitä arvoja tulee käyttää 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 efekti, 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