Ääriviivateksti: ontot kirjaimet, jotka silti erottuvat

Ääriviivateksti näyttää vain kirjaimen reunan, jättäen sisustan ontoksi ja taustan näkyviin. Se erottuu kolmella ehdolla: vahva kirjasin avoimine muotoineen, luettavan paksu viiva noin 2-4 prosenttia kirjasinkoosta sekä suuri koko rauhallisella taustalla. Varmin asettelu yhdistää yhden täytetyn sanan yhteen ääriviivasanaan, jotta silmä saa ensin jotain tukevaa luettavaa.

Miksi ääriviivatekstiä on vaikea lukea

Tunnistamme kirjaimet niiden kiinteistä muodoista. Ääriviiva poistaa massan ja jättää joka vetoon kaksi ohutta viivaa, ulko- ja sisäreunan. Suuressa koossa silmä täydentää muodon. Pienessä koossa tai hiusviivalla viivat sumenevat yhteen tai katoavat taustaan. Levoton pohja pahentaa ongelmaa, koska ontto sisusta näyttää kaiken tekstuurin.

Kirjasimen ja viivan valinta

Aloita vahvuudesta. Black- tai Extra Bold -leikkauksen leveät vedot kuvaavat selkeää muotoa vielä ääriviivoina. Avoimet kirjaimet auttavat: O:n, A:n ja e:n pyöreät sisäaukot pysyvät näkyvissä sulkeutumisen sijaan. Archivo Black, Anton tai vahva groteski ovat hyviä lähtökohtia. Lihavat kirjasimet tarjoaa lisää.

Väri on yhtä tärkeä kuin leveys. Vaalea viiva tummalla erottuu helpommin kuin tumma vaalealla, koska vaaleat viivat näyttävät hieman leviävän. Ota viivan väri taustan vaaleimmasta tai tummimmasta osasta, jotta se kuuluu designiin. Liukuvärillä tarkista kohta, jossa pohja on lähimpänä viivan väriä: ääriviiva katoaa siellä ensin.

Asettelut, joissa ääriviivateksti toimii

• Täytetty ja ontto pari: Kesä täytettynä, Sessiot ääriviivana. Täytetty sana ankkuroi, ääriviiva rytmittää.
• Toistuva sana: sama sana kolmessa tai neljässä kerroksessa, yksi täytettynä ja loput ääriviivoina, luo kaiun tai liikkeen tuntua. Retrotekstitehosteet käsittelee sukua olevia kaksois- ja jälki-ilmeitä.
• Taustasana: valtava ääriviivasana pienemmän täytetyn otsikon takana toimii tekstuurina tekstin sijaan. Syvyyttä onttojen muotojen sijaan tarjoaa 3D-tekstitehoste.
• Ääriviiva osoitettaessa tai toisessa tilassa: verkossa ontto painike tai linkki, joka täyttyy valittaessa.

Näin teet ääriviivatekstin CSS:llä

Ominaisuus on -webkit-text-stroke. Etuliitteestä huolimatta se toimii kaikissa suurissa selaimissa ja kuuluu verkkoyhteensopivuusstandardiin. Aseta tekstiväri läpinäkyväksi onttoa sanaa varten tai säilytä täyttö reunustetulle kiinteälle kirjaimelle. MDN:n ohje antaa yksityiskohdat.

.outline {
  font-family: "Archivo Black", system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 1;
  color: #fafaf9; /* fallback: solid letters */
}

@supports (-webkit-text-stroke: 1px black) {
  .outline {
    color: transparent;
    -webkit-text-stroke: 0.03em #fafaf9; /* about 3% of the size */
  }
}

/* Solid and hollow pair */
.outline-pair .solid { color: #fafaf9; }
.outline-pair .hollow {
  color: transparent;
  -webkit-text-stroke: 0.03em #fafaf9;
}

Ruudunlukijat lukevat ääriviivatekstin normaalisti, koska se on edelleen oikeaa tekstiä. Pidä se sellaisena: älä muuta verkkosivun ääriviivaotsikoita kuviksi. Kontrasti on jäljelle jäävä riski, koska työkalut mittaavat nyt läpinäkyvää tekstiväriä. Tarkista viiva taustaa vasten silmällä ja kontrastintarkistimella käyttäen viivan väriä. Värikontrasti ja saavutettavuus käsittelee suhteet.

Ulkoreunaviiva ja sisäviiva: kaksi sukulaistyyliä

Ääriviivakirjainten sukulaiset säilyttävät enemmän kiinteää muotoa. Ulkoreunaviiva piirtää täytetyn kirjaimen ulkopuolelle viivan ja erottaa sen taustasta tarran reunuksen tavoin. Sisäviiva leikkaa jokaiseen vetoon ohuen viivan, kuten kaiverretussa ja viktoriaanisessa otsikkotyypissä sekä monissa kauppakylteissä. Molemmat ovat täysin onttoa sanaa luettavampia, joten ne sopivat pienempään tekstiin. Laajempaa tehosteperhettä käsittelee tekstitehosteet.

1. 1

   Valitse sana

   Yksi tai kaksi viestin kantavaa sanaa, ei koskaan lausetta.

2. 2

   Aseta vahvaksi ja suureksi

   Black-leikkaus otsikkokoossa. Ääriviivakirjaimet eivät kuulu leipätekstiin.

3. 3

   Valitse ontto, ulko- tai sisäviiva

   Ontto tuo draamaa, ulkoviiva nostaa sanan levottomalta pohjalta ja sisäviiva käsityömäisen kylttitunnelman.

4. 4

   Ota väri taustasta

   Käytä sen vaaleinta tai tumminta sävyä, jotta viiva kuuluu designiin.

5. 5

   Tarkista puhelimessa

   Katso julkaisua oikeassa koossa. Jos ääriviiva välkkyy tai katoaa, paksunna viivaa tai täytä sana.

Gradientlyn kirjaintehosteet kattavat tämän perheen ilman käsin rakennettuja kerroksia: Sisäviiva kaivertaa viivan kirjaimen sisään, Kaksinkertainen piirtää avoimet kirjaimet kahdesti, Jälki jättää ääriviivat perään ja Käyrät ympäröi sanat korkeuskäyrillä. Taustan Mark siirtää rauhallisimman alueensa sanojen taakse, joten ontto tai sisäviivainen otsikko saa vakaan pohjan. Liukuvärikirjaimet ovat eri tekniikka, jota käsittelee liukuväriteksti CSS:llä.