# Kirjaintehosteet: Käyrät, Sisäviiva, Leikattu ja muita

[Canonical HTML page](https://gradiently.design/fi/guide/lettering-treatments)

Tehoste muuttaa tekstirivin kirjainkuvitukseksi Markisi omilla väreillä. Tässä ovat kaikki kahdeksan, kullekin sopivat työt ja tilanteet, joissa ne kannattaa jättää pois.

## The short version

- Gradientlyssä on kahdeksan kirjaintehostetta: Käyrät, Sisäviiva, Leikattu, Kohotettu, Kaksinkertainen, Jälki, Riso ja Halo.
- Jokainen tehoste piirretään designin Markin väreillä, joten kirjaintehosteen värit sopivat aina taustaan.
- Kirjaintehosteet toimivat parhaiten lyhyissä, näyttävissä sanoissa, kuten otsikossa, nimessä tai yksittäisessä sanassa, eivät leipätekstissä.
- Käyrät, Leikattu ja Kohotettu tuovat oman kontrastinsa ja sopivat vahvoihin julisteisiin. Sisäviiva, Kaksinkertainen ja Riso sopivat toimitukselliseen ja painettuun ilmeeseen.
- Käytä yhtä tehostetta suunnitelman tärkeimmällä rivillä ja pidä tukiteksti tavallisena.

Gradientlyssä on kahdeksan **kirjaintehostetta**: Käyrät, Sisäviiva, Leikattu, Kohotettu, Kaksinkertainen, Jälki, Riso ja Halo. Ne muuttavat tekstirivin Markisi väreillä piirretyksi kirjainkuvitukseksi: sanoja ympäröiviksi korkeuskäyriksi, kirjainten sisään kaiverretuksi viivaksi, levystä leikatuiksi sanoiksi tai syviksi kolmiulotteisiksi kirjaimiksi. Käytä niitä lyhyessä otsikossa, nimessä tai muussa näyttävässä sanassa. Yksi tehoste tärkeimmällä rivillä riittää.

## Kaikki kahdeksan kirjaintehostetta yhdellä silmäyksellä

| Tehoste | Mitä se piirtää | Vaikutelma | Sopii parhaiten |
| --- | --- | --- | --- |
| **Käyrät** | Sanojen ympärille aaltoilevat korkeuskäyrät | Kartat, topografia, ääni | Festivaalijulisteet, levynkannet, ulkoilubrändit |
| **Sisäviiva** | Kirjaimen sisään kaiverrettu viiva, josta Mark näkyy toisena värinä | Kyltit, vintage-painotuotteet | Näyteikkunatyyliset otsikot, ruokalistat, etiketit |
| **Leikattu** | Yhtenäisestä levystä leikatut sanat | Sapluuna, paperiaskartelu | Vahvat kannet, tarjousjulkaisut, yhden sanan viestit |
| **Kohotettu** | Syvät kirjaimet, joiden sivut ovat Markin väreissä | Vankka, veistoksellinen, retro | Tapahtumaotsikot, julkistukset, YouTube-pikkukuvat |
| **Kaksinkertainen** | Kahdesti hieman eri kohtiin piirretyt avoimet kirjaimet | Kaiku, liike, muoti | Toimitukselliset kannet, musiikki, yöelämä |
| **Jälki** | Kirjainten perässä kulkevat ääriviivat, joiden värin voit asettaa | Nopeus, liike, 1970-luku | Urheilu, lähtölaskennat, energiset tarinat |
| **Riso** | Kaksi hieman eri kohtiin osuvaa mustetta ja rakeinen pisteytys | Risografipienlehdet, riippumattomat painotuotteet | Julisteet, pienlehdet, leipomot, kirjakaupat |
| **Halo** | Pehmeä valo Markin värissä kirjainten ympärillä | Neon, iltahämärä, unenomaisuus | Vain koristeluun, ei koskaan luettavuuden korjaamiseen |

Kahdeksan tehostetta. Jokainen käyttää Markin palettia, joten Markin vaihtaminen vaihtaa samalla kirjainkuvituksen värit.

## Käyrät, Leikattu ja Kohotettu: kirjainkuvitus omalla kontrastilla

Nämä kolme luovat kirjaimiin vahvan reunan, joten teksti erottuu myös eloisasta Markista. **Käyrät** ympäröi sanat korkeuskäyrillä, jotka saavat tekstin tuntumaan taustasta kohoavalta. **Leikattu** näyttää sanat yhtenäisestä levystä leikattuina muotoina: vaikutelma on varma ja graafinen. **Kohotettu** antaa jokaiselle kirjaimelle syvyyttä Markin väreissä. Se on klassinen valinta julkistusotsikkoon tai pikkukuvaan.

Pystyjuliste, jossa yksittäinen sana Solstice on erittäin suurena lämpimällä liukuväri-Markilla

Yksi sana erittäin suurena: mittakaava, jota varten Käyrät ja Kohotettu on tehty.

Sama Solstice-suunnitelma tapahtumajulisteena, suuri otsikko ja tavalliset tukitiedot alla

Tehostettu otsikko ylhäällä ja tavalliset lisätiedot alla. Vain otsikko saa tehosteen.

Jos haluat tietää, miten kolmiulotteinen ja ääriviivoista koostuva teksti yleisesti toimivat, [3D-tekstitehosteet](https://gradiently.design/fi/guide/3d-text-effect) ja [ääriviivateksti](https://gradiently.design/fi/guide/outline-text) selittävät niiden toteutusta.

## Sisäviiva, Kaksinkertainen ja Riso: painettu ja toimituksellinen ilme

**Sisäviiva** kaivertaa yhden viivan jokaisen kirjaimen sisään. Koska viivasta näkyy Mark itse, tausta muuttuu kirjainkuvituksen toiseksi väriksi. Se sopii parhaiten paksuihin, leveisiin kirjaintyyppeihin, joiden piirroissa on tilaa. **Kaksinkertainen** piirtää avoimet kirjaimet kahdesti pienellä siirtymällä ja luo muoti- tai musiikkipainotuotteen kaltaisen kaiun. **Riso** jäljittelee risografia: kaksi hieman eri kohtiin osuvaa mustetta ja rakeinen pisteytys sopivat kaikkeen, jonka pitäisi tuntua käsin painetulta.

> **Sovita tehoste kirjaintyyppiin** Sisäviiva ja Leikattu tarvitsevat paksut piirrot, joten yhdistä ne vahvaan otsikkofonttiin. Kaksinkertainen ja Jälki näyttävät parhailta avoimilla, yksinkertaisilla kirjaimilla. Riso toimii lähes millä tahansa kirjaintyypillä, joten sitä on turvallista kokeilla ensimmäisenä.

## Jälki ja Halo: liike ja tunnelma

**Jälki** toistaa sanan ääriviivaa sen takana, kuin kirjaimet jättäisivät vanan. Voit asettaa vanan värin, ja se viestii nopeutta: hyvä urheiluun, lähtölaskentoihin ja kaikkeen, jonka pitäisi tuntua liikkuvan pysäytyskuvassakin. **Halo** ympäröi kirjaimet pehmeällä valolla Markin värissä. Se on puhtaasti koristeellinen, tunnelma eikä työkalu, eikä koskaan keino pelastaa vaikeasti luettavaa tekstiä. Jos rivi ei erotu, nosta Markin reagointitasoa tai anna [Automaattisen musteen](https://gradiently.design/fi/guide/auto-ink-legibility) valita toinen tekstiväri.

## Valitse työhön sopiva kirjaintehoste

| Mitä teet | Kokeile ensin | Kokeile sitten |
| --- | --- | --- |
| Keikka- tai festivaalijuliste | Käyrät | Riso |
| Tuotejulkistus | Kohotettu | Leikattu |
| Kahvilan tai leipomon ruokalistan otsikko | Sisäviiva | Riso |
| YouTube-pikkukuva | Kohotettu | Leikattu |
| Lehtityylinen kansi tai karusellin aloitus | Kaksinkertainen | Sisäviiva |
| Lähtölaskenta tai urheilutarina | Jälki | Kohotettu |
| Pienlehti tai kirjakaupan juliste | Riso | Kaksinkertainen |

Lähtökohtia, ei sääntöjä. Kokeile kahta, katso molempia siinä koossa, jossa ihmiset todella näkevät ne, ja pidä helpommin luettava.

### Vältä

- Tehostetta leipätekstissä tai pienissä lisätiedoissa
- Kahta eri tehostetta samassa suunnitelmassa
- Vähintään kahdeksan sanan pitkiä otsikoita
- Haloa heikosti erottuvan rivin luettavuuden korjaamiseen

### Tee näin

- Yksi tehoste yhteen tai kahteen näyttävään sanaan
- Tavallinen, väljä tukiteksti
- Paksut kirjaintyypit Sisäviiva- ja Leikattu-tehosteisiin
- Tarkista puhelimella todellisessa koossa

## Näin lisäät kirjaintehosteen Studiossa

1. **Valitse teksti** Valitse tehostettava otsikko tai sana. Pidä kaikki muu tavallisena tekstinä.
2. **Valitse tehoste** Valitse yksi kahdeksasta kirjaintehosteesta. Se piirretään heti suunnitelman Markin väreillä.
3. **Säädä typografiaa** Valitse paksumpi tai leveämpi fontti, jos tehoste näyttää ahtaalta. Lisää Kaksinkertainen- ja Jälki-tehosteissa hieman kirjainväliä.
4. **Kokeile toista Markia** Vaihda Mark ja katso, miten kirjainkuvituksen värit vaihtuvat sen mukana. Tämä on nopein tapa arvioida tehostetta.
5. **Tarkista kaikki koot** Muuta koko tarinaksi tai pikkukuvaksi ja varmista, että tehostettu sana erottuu siinäkin mittakaavassa.

## Kirjaintehosteet CSS:llä verkkoon

Jos tarvitset samankaltaisen ilmeen verkkosivulle, kaksi näistä siirtyy helposti CSS:ään: Kaksinkertainen-tehosteen kaltainen ääriviiva ja portaittainen kohotus. Molemmat käyttävät aitoa tekstiä, joten ne säilyvät valittavina ja saavutettavina.

```css
/* Open outline letters, in the spirit of Double */
.outline {
  color: transparent;
  -webkit-text-stroke: 2px #f4b26a;
  text-shadow: 6px 6px 0 #7a2e5c;
}

/* A stepped extrusion in two tones */
.extrude {
  color: #fbe7d4;
  text-shadow:
    1px 1px 0 #c2577a,
    2px 2px 0 #c2577a,
    3px 3px 0 #a3456a,
    4px 4px 0 #a3456a,
    5px 5px 0 #7a2e5c,
    6px 6px 0 #7a2e5c;
}
```

Teräväreunaiset varjot ilman sumennusta rakentavat syvyyttä hohteen sijaan. `-webkit-text-stroke` toimii kaikissa nykyisissä selaimissa; katso [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke).

Laajemmasta tehosteperheestä, myös verkkoon huonosti sopivista vaihtoehdoista, kertoo [tekstitehosteet](https://gradiently.design/fi/guide/text-effects). Jos mietit, tarvitsetko kirjainkuvitusta lainkaan, [kirjainkuvitus vai typografia](https://gradiently.design/fi/guide/lettering-vs-typography) on hyödyllinen artikkeli.

## FAQ

### Mitä kirjaintehosteita Gradientlyssä on?

Kahdeksan: Käyrät, Sisäviiva, Leikattu, Kohotettu, Kaksinkertainen, Jälki, Riso ja Halo. Jokainen piirretään suunnitelman Markin väreillä.

### Voinko käyttää kirjaintehosteita leipätekstissä?

Mieluiten et. Tehosteet on tehty lyhyille, näyttäville sanoille; tavallinen teksti pitää pidemmät sisällöt helppolukuisina.

### Mikä kirjaintehoste sopii parhaiten julisteeseen?

Käyrät, Kohotettu ja Riso ovat vahvoja julistevalintoja. Käyrät ja Kohotettu tuovat oman kontrastinsa, ja Riso antaa painetun vaikutelman.

### Vaihtavatko kirjaintehosteet väriä Markin mukana?

Kyllä. Jokainen tehoste käyttää Markin palettia, joten Markin vaihtaminen vaihtaa kirjainkuvituksen värit.

### Pitäisikö Haloa käyttää tekstin luettavuuden parantamiseen?

Ei. Halo on koristeellinen. Paranna luettavuutta nostamalla Markin reagointitasoa tai antamalla Automaattisen musteen valita toinen tekstiväri.