# Lihavat fontit julisteisiin, pikkukuviin ja otsikoihin

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

Lihava teksti huomataan nopeasti kadun tai syötteen toiselta puolelta. Pelkkä raskaimman leikkauksen valinta ei silti riitä. Tässä ilmaiset fontit tehtävittäin ja vinkit teräviin kirjaimiin.

## The short version

- Lihavat fontit ovat raskaita, yleensä 700-900-leikkauksen kirjasimia, jotka pysyvät luettavina etäältä ja pienessä esikatselukoossa.
- Anton, Archivo Black, Bebas Neue, Unbounded ja Alfa Slab One ovat ilmaisia lihavia fontteja Google Fontsissa.
- Kapeat lihavat fontit mahduttavat enemmän kirjaimia kapeaan tilaan, leveät taas tekevät lyhyistä sanoista monumentaalisia.
- Lihava teksti tarvitsee pienessä koossa hieman enemmän merkkiväliä ja hyvin suuressa tiiviimpää välistystä.
- Kirjasinsuunnittelijan piirtämä aito bold- tai black-leikkaus näyttää aina paremmalta kuin ohjelmiston jäljittelemä lihavointi.

**Lihavat fontit** ovat paksuviivaisia kirjasimia, yleensä leikkauksina 700 eli boldista 900 eli blackiin. Ne sopivat kaikkeen nopeasti luettavaan: ohimennen nähtäviin julisteisiin, muutaman senttimetrin YouTube-pikkukuviin ja kiireisen syötteen tarjousotsikoihin. Google Fontsin hyviä ilmaisvaihtoehtoja ovat Anton ja Bebas Neue kapeaan voimaan, Archivo Black ja Rubik Black raskaisiin groteskeihin, Unbounded leveään otsikointiin ja Alfa Slab One jykevään egyptienneen. Valitse ensin muodon mukaan, sillä julisteella toimiva kirjasin voi tukkeutua pikkukuvassa.

## Mitä lihavuusluvut tarkoittavat

Fonttien lihavuus kulkee numeroasteikolla 100-900. Useimmat perheet nimeävät leikkaukset, mutta CSS käyttää numeroita suoraan. Bold on teknisesti 700, mutta julisteisiin ja pikkukuviin haluat usein 800 tai 900.

| Numero | Tavallinen nimi | Käyttökohde |
| --- | --- | --- |
| 400 | Regular, normaali | Leipäteksti |
| 500 | Medium, keskipaksu | Käyttöliittymän tekstit ja pieni lihava teksti |
| 600 | Semibold, puolilihava | Väliotsikot ja painikkeet |
| 700 | Bold, lihava | Näyttöotsikot ja korostukset |
| 800 | Extra bold, erittäin lihava | Someotsikot ja julisteiden väliotsikot |
| 900 | Black tai Heavy, raskas | Julisteet, pikkukuvat ja yksittäiset sanat |

Kaikissa perheissä ei ole kaikkia leikkauksia. Varmista ennen valintaa, että tarvitsemasi leikkaus on aidosti piirretty.

## Ilmaiset lihavat fontit eri tehtäviin

| Tehtävä | Google Fonts | Miksi |
| --- | --- | --- |
| Pikkukuvat ja pitkät sanat tiiviissä tilassa | Anton, Bebas Neue, Oswald Bold, Barlow Condensed Black | Kapeus mahduttaa enemmän kirjaimia suurempaan kokoon |
| Kolmen tai neljän sanan julisteet | Archivo Black, Rubik Black, Inter Black, Poppins Black | Vankat groteskit pysyvät selkeinä etäältä |
| Lyhyet valtavilta tuntuvat sanat | Unbounded, Dela Gothic One, Bowlby One | Leveät ja raskaat, vähän valkoista kirjainten sisällä |
| Retro ja kyltit | Alfa Slab One, Bungee, Ultra | Egyptiennet ja kylttimaalarin muodot |
| Ystävällinen ja leikkisä | Lilita One, Titan One, Fredoka Bold | Pyöristetyt kulmat pehmentävät painoa |
| Lihava muotivivahteella | Abril Fatface, Playfair Display Black | Raskaat Didone-antiikvat dramaattisella kontrastilla |

Kaikki ilmaisia avoimilla lisensseillä Google Fontsissa. Yhdistä mikä tahansa niistä normaalivahvuiseen groteskiin tukitekstissä.

Kaksi huomiota. **Bebas Neue** sisältää vain suuraakkosia, joten se sopii lyhyisiin riveihin, ei lauseisiin. **Unbounded** on muuttuva fontti kevyestä blackiin. Voit valita tarkan lihavuuden, ja leveät kirjaimet täyttävät koko julisteen kahdella tai kolmella sanalla.

## Lihavat fontit julisteisiin

Juliste luetaan huoneen tai kadun toiselta puolelta muutamassa sekunnissa. Otsikon pitää olla luettava ohikulkijoiden etäisyydeltä, joten se täyttää yleensä suuren osan leveydestä. A3-juliste tarkkuudella 300 dpi on 3508×4961 pikseliä. Kolmen tai neljän sanan black-otsikko voi hyvin täyttää kolmanneksen korkeudesta. [Julisteen suunnittelu](https://gradiently.design/fi/guide/poster-design) käsittelee asettelua ja hierarkiaa.

A3-keikkajuliste, jossa lukee KEIKKA: The Docks raskaalla kapealla tekstillä tumman liukuvärin päällä

A3-keikkajuliste. Aseta otsikko raskaalla kapealla kirjasimella niin suureksi, että sen lukee kadun toiselta puolelta.

YouTube-pikkukuva, jossa vasemmalla on lihava otsikko Kokeilin sitä 30 päivää eloisalla liukuvärillä

1280×720-YouTube-pikkukuva: neljä tai viisi lihavaa sanaa vasemmalle tasattuina, oikealla tilaa kasvoille tai esineelle.

## Lihavat fontit YouTube-pikkukuviin

Pikkukuvat suunnitellaan kokoon 1280×720, mutta ne näkyvät usein paljon pienempinä sivupalkissa tai puhelimella. Se on tekstin ankarin testi. Käytä black-leikkausta, pidä teksti kolmesta viiteen sanassa ja suosi kapeita kirjasimia pitkille sanoille. Jätä oikea alakulma vapaaksi, sillä YouTube näyttää siellä videon keston. [Pikkukuvan typografia](https://gradiently.design/fi/guide/typography-for-thumbnails) ja [YouTube-pikkukuvan suunnittelu](https://gradiently.design/fi/guide/youtube-thumbnail-design) kertovat lisää.

## Näin pidät lihavan tekstin luettavana

Raskailla kirjaimilla on pienet sisäaukot, esimerkiksi a:ssa, e:ssä ja o:ssa. Pienennettäessä ne täyttyvät, ja lihava sana muuttuu tummaksi möykyksi. Korjaukset liittyvät enemmän välistykseen ja kontrastiin kuin kokoon.

### Vältä

- Black-leikkaus pikkukoossa ilman merkkiväliä
- Ohjelmistopainikkeen tekemä jäljitelmälihavointi
- Lihava teksti levottomalla yhtä voimakkaalla taustalla
- Jokainen julisteen sana black-leikkauksella
- Raskaat kirjaimet ahdettu reunoihin

### Tee näin

- Avaa merkkiväliä hieman pienessä lihavassa tekstissä
- Aito 800- tai 900-leikkaus fonttiperheestä
- Rauhallinen kontrastialue otsikon takana
- Lihava otsikko ja normaalileikkaus yksityiskohtiin
- Väljät marginaalit raskaiden kirjainten ympärille

Tekstitehosteet voivat lisätä läsnäoloa. Ääriviiva, sisäviiva tai kevyt kohotus antaa lihavalle sanalle syvyyttä ilman heittovarjoa. [Ääriviivateksti](https://gradiently.design/fi/guide/outline-text) näyttää miten. Gradientlyssä Käyrät-, Sisäviiva-, Kohotettu- ja Kaksinkertainen-tekstikäsittelyt kuuluvat tekstityökaluihin. Sanojen taustan Mark rauhoittaa levottomimpia yksityiskohtiaan ja tummentaa tai vaalentaa kirjainten lähiväriä, jotta raskas teksti pysyy terävänä eloisalla taustalla.

## Lihavat fontit CSS:ssä

Jos pyydät selaimelta leikkausta, jota fonttitiedostossa ei ole, se voi jäljitellä sitä paksuntamalla ääriviivoja. Tulos näyttää tuhruiselta ja epätasaiselta. Lataa oikea leikkaus ja estä synteettinen lihavointi, jotta huomaat puuttuvan leikkauksen.

```css
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;600&display=swap");

h1 {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-weight: 400;          /* Archivo Black has one weight, already heavy */
  font-synthesis: none;      /* never fake bold or italic */
  line-height: 1;
  letter-spacing: -0.01em;
}

.label {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;    /* small bold text needs a little air */
}
```

Yhden leikkauksen otsikkofontit, kuten Archivo Black, rekisteröidään vahvuutena 400. Pyydä siis 400, älä 900.

Suuren tekstin äänen valinnasta kertovat lisää [otsikkokirjasimet](https://gradiently.design/fi/guide/headline-fonts) ja [display-fontit](https://gradiently.design/fi/guide/display-fonts).

## FAQ

### Mikä on lihavin ilmainen fontti?

Virallista järjestystä ei ole, mutta Archivo Black, Dela Gothic One, Bowlby One ja Unboundedin black-leikkaus kuuluvat Google Fontsin raskaimpiin ilmaisiin fontteihin.

### Mikä fontin vahvuus on bold?

Bold on 700. Extra bold on 800 ja black tai heavy on 900.

### Mikä lihava fontti sopii parhaiten YouTube-pikkukuviin?

Kapeat raskaat kirjasimet, kuten Anton ja Bebas Neue, mahduttavat pitkät sanat. Archivo Black ja Rubik Black sopivat lyhyisiin. Pidä teksti kolmesta viiteen sanassa.

### Miksi lihava tekstini näyttää pienenä sumealta?

Raskaiden kirjainten pienet sisäaukot täyttyvät pienessä koossa. Lisää hieman merkkiväliä, käytä kevyempää leikkausta tai suurenna tekstiä.

### Mitä jäljitelmälihavointi tarkoittaa?

Ohjelmisto paksuntaa normaalileikkauksen lihavaksi. Se näyttää tuhruiselta ja epätasaiselta. Käytä fonttiperheen oikeaa lihavaa leikkausta.