# Tasalevyiset fontit brändäyksessä: tekniikka, julkaisut ja retro

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

Tasalevyinen teksti tehtiin kirjoituskoneisiin ja päätteisiin. Nyt brändit käyttävät sitä tarkkuuden, suoruuden tai nostalgian ilmaisemiseen. Näin valitset fontin ja sille oikean paikan identiteetissä.

## The short version

- Tasalevyisessä fontissa jokainen merkki vie saman leveyden, joten teksti asettuu täydellisiin sarakkeisiin.
- Tasalevyinen teksti tuntuu tekniseltä, toimitukselliselta tai retrohenkiseltä kirjaintyypin ja ympäröivien värien mukaan.
- JetBrains Mono, IBM Plex Mono, Space Mono, DM Mono ja Courier Prime ovat Google Fontsin ilmaisia tasalevyisiä fontteja.
- Tasalevyiset fontit toimivat parhaiten tunnisteissa, numeroissa, koodeissa ja lyhyissä riveissä. Pitkissä kappaleissa ne rasittavat lukemista.
- Jos tarvitset vain numeroiden tasausta, tavallisen fontin tasalevyiset numerot hoitavat tehtävän muuttamatta koko tekstin ääntä.

**Tasalevyiset fontit** antavat jokaiselle merkille saman leveyden. Siksi i vie yhtä paljon tilaa kuin m ja teksti asettuu siisteihin sarakkeisiin. Brändit käyttävät niitä juuri tämän mekaanisen rytmin vuoksi. Teknologiabrändissä tasalevyinen teksti tuntuu tarkalta ja suunnitellulta, julkaisusuunnittelussa suoralta ja dokumentaariselta, retrotöissä se muistuttaa kirjoituskoneista, kuiteista ja vihreistä päätenäytöistä. Hyviä ilmaisia vaihtoehtoja ovat JetBrains Mono, IBM Plex Mono, Space Mono, DM Mono ja Courier Prime, kaikki Google Fontsissa.

## Mistä tasalevyisen tekstin tunnelma syntyy

Tavalliset fontit ovat suhteellisia: kapeat kirjaimet saavat kapean tilan, leveät leveän. Tasalevyisyys pakottaa jokaisen kirjaimen samaan laatikkoon. Kapeisiin kirjaimiin lisätään päätteitä tilan täyttämiseksi, leveitä puristetaan, ja tuloksessa näkyy ruudukko. Se yhdistyy sitä tuottaneisiin koneisiin: kirjoituskoneisiin, koodieditoreihin, päätteisiin, lentolippuihin ja lähetystarroihin. Nämä mielleyhtymät ovat brändiarvo ja myös riski.

## Ilmaiset tasalevyiset fontit tyyleittäin

| Tyyli | Google Fonts | Luonne | Sopii |
| --- | --- | --- | --- |
| Selkeä tekninen | JetBrains Mono, Geist Mono, Roboto Mono, Source Code Pro | Neutraali, hyvin luettava, koodiin tehty | Kehittäjätyökalut, SaaS, dokumentaatio |
| Yritysmäinen ja toimituksellinen | IBM Plex Mono, DM Mono, Red Hat Mono | Rauhallinen, hienostunut, hieman kirjallinen | Lehdet, studiot, vuosikertomukset |
| Luonteikas | Space Mono, Martian Mono, Azeret Mono | Geometrinen tai erikoinen, vahva suuressa koossa | Otsikot, julisteet, luovat brändit |
| Kirjoituskone | Courier Prime, Special Elite | Paksut päätteet, muste ja paperi | Käsikirjoitukset, kirjeet, vintagebrändit |
| Retronäyttö | VT323, Share Tech Mono | Päätteiden ja tieteiselokuvien näyttömuodot | Pelit, musiikki, nostalgiset kampanjat |

Ilmaisia avoimilla lisensseillä. Fira Code lisää myös ohjelmointiligatuureja, jotka muuttavat merkkiparit kuten => yhdeksi symboliksi.

Muutama taustatarina auttaa valinnassa. **IBM Plex Mono** kuuluu IBM:n omaan yritysfonttiperheeseen, joten siinä on vakavaa, institutionaalista rauhaa. **Space Monon** suunnitteli Colophon Google Designille. Sen erottuva geometrinen ilme toimii otsikkona. **Courier Prime** tehtiin hienostuneemmaksi Courieriksi käsikirjoituksiin. **VT323** perustuu 1980-luvun DEC-tietokonepäätteen tekstiin ja tuntuu siksi heti retrohenkiseltä.

## Tasalevyisyys teknologiabrändissä

Kehittäjätyökaluissa ja teknisissä tuotteissa tasalevyinen kirjaintyyppi kertoo brändin puhuvan käyttäjän kieltä. Ansa on käyttää sitä kaikkialla. Kokonaan tasalevyinen verkkosivu on raskas lukea ja näyttää koodieditorilta tuotteen sijaan. Vahvempi tapa on käyttää selkeää groteskia otsikoihin ja leipätekstiin ja tasalevyisyyttä aidosti teknisiin yksityiskohtiin: versionumeroihin, komentoihin, tunnisteisiin, taulukkohintoihin ja pieniin esiriveihin.

Leveä LinkedIn-linkkikuva version 3.0 julkaisusta ja pieni tekninen tunniste otsikon yllä

LinkedInin 1200×627-linkkikuva uudesta versiosta. Versiotunniste on tasalevyisyyden luonteva paikka, kun otsikko voi pysyä groteskina.

Toimituksellinen pystyjulkaisu otsikolla Raportti 017 sekä pieni päivämäärätunniste ja lyhyt lista

Toimituksellinen julkaisu. Tasalevyiset päivämäärät, numerot ja arkistotunnisteet tuovat dokumentaarisen muistikirjatunnelman.

## Tasalevyisyys julkaisusuunnittelussa

Lehdet, uutiskirjeet ja studiot käyttävät tasalevyisyyttä metatietoihin: päiväyksiin, kuvateksteihin, tekijätietoihin, numeroihin ja juokseviin otsakkeisiin. Antiikvan tai hienostuneen groteskin vieressä se tuo rehellisen sävyn kuin toimittajan muistikirja tai arkistotunniste. Se toimii, koska sitä käytetään niukasti ja pienessä koossa, suuraakkosin tai hieman välistetyin pienaakkosin. [Typografian perusteet](https://gradiently.design/fi/guide/typography-basics) ja [fonttien yhdistäminen](https://gradiently.design/fi/guide/font-pairing) kertovat tämän kontrastin rakentamisesta.

## Tasalevyisyys retrosuunnittelussa

Retrohenkinen tasalevyisyys puhuu kahta kieltä. Kirjoituskonefontit tuovat paperin, musteen ja 1960-luvun toimiston, päätefontit hehkuvat näytöt ja varhaisen tietotekniikan. Väri tekee puolet työstä: kirjoituskonefontti lämpimällä luonnonvalkoisella, päätefontti fosforinvihreänä tai meripihkanvärisenä lähes mustalla. [Retrofontit](https://gradiently.design/fi/guide/retro-fonts) käsittelee laajempaa nostalgisten tyylien valikoimaa.

- Päätteen musta: #0b0f0c
- Fosforinvihreä: #33ff66
- Meripihkanvärinen näyttö: #ffb000
- Kirjoituspaperi: #f3ecdc
- Värinauhan muste: #2b2a28

Kaksi retromaailmaa tasalevyisyydelle: vihreä tai meripihka päätteen mustalla tai värinauhamuste kirjoituspaperilla. Valitse yksi, älä molempia.

## Tasalevyisyyden toimiva käyttö

### Vältä

- Pitkät tasalevyiset kappaleet
- Tasalevyisyys brändin jokaisessa osassa
- Kirjoituskonefontit vakavassa taloustekstissä
- Kahden eri tasalevyisen kirjaintyypin sekoittaminen
- Pienet tasalevyiset tunnisteet ilman kirjainväliä

### Tee näin

- Tasalevyisyys tunnisteisiin, numeroihin, koodeihin ja lyhyisiin riveihin
- Groteski tai antiikva otsikoihin ja leipätekstiin
- Sovita tyyli brändin sävyyn
- Yksi tasalevyinen kirjaintyyppi yhdessä tai kahdessa tehtävässä
- Pieni tasalevyinen teksti suuraakkosin ja noin 0,05em:n kirjainvälillä

Joskus haluat vain numerot linjaan ilman mekaanista ääntä. Monissa suhteellisissa fonteissa on tasalevyiset numerot, jotka voit ottaa käyttöön CSS:llä. Ne pitävät hinnat ja taulukot siisteinä muuttamatta koko työn tunnelmaa.

```css
/* A monospace accent for technical labels */
.label {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Aligned numbers without switching to monospace */
.price-table td {
  font-variant-numeric: tabular-nums;
}
```

`ui-monospace` käyttää käyttöjärjestelmän omaa tasalevyistä kirjaintyyppiä varavaihtoehtona. `tabular-nums` tasaa numerot sitä tukevissa fonteissa.

Tasalevyisyys sopii liukuväri- ja materiaalitaustoihin, koska sen tasainen rytmi luo kontrastin pehmeään väriin. Gradientlyssä Mark pitää pienet tunnisteet luettavina siirtämällä rauhallisimman alueensa sanojen taakse ja valitsemalla vaalean tai tumman musteen riveittäin. Pron brändipaketti säilyttää otsikko- ja leipätekstifonttisi, myös [ladatut fonttitiedostot](https://gradiently.design/fi/guide/custom-fonts-upload). Bränditypografiaa laajemmin käsittelevät [brändifontit](https://gradiently.design/fi/guide/brand-fonts) ja [modernit fontit](https://gradiently.design/fi/guide/modern-fonts).

## FAQ

### Mikä on tasalevyinen fontti?

Fontti, jossa jokainen merkki vie saman vaakasuuntaisen leveyden. Teksti asettuu sarakkeisiin kuten kirjoituskoneessa tai koodieditorissa.

### Mikä on paras ilmainen tasalevyinen fontti?

JetBrains Mono ja IBM Plex Mono ovat erinomaisia yleisfontteja. Space Mono sopii otsikoihin ja Courier Prime kirjoituskoneilmeeseen. Kaikki ovat ilmaisia Google Fontsissa.

### Voinko käyttää tasalevyistä fonttia brändille?

Kyllä, etenkin teknologia-, julkaisu- tai retrobrändille. Käytä sitä tunnisteisiin, numeroihin ja lyhyisiin riveihin sekä yhdistä groteskiin tai antiikvaan pidemmissä teksteissä.

### Sopiiko tasalevyisyys leipätekstiin?

Yleensä ei. Samat leveydet tekevät sanoista epätasaisia ja hidastavat kappaleiden lukemista. Säilytä tasalevyisyys koodille ja lyhyille teksteille.

### Miten tasaan numerot ilman tasalevyistä fonttia?

Käytä tasalevyisiä numeroita. CSS:n `font-variant-numeric: tabular-nums` antaa numeroille saman leveyden sitä tukevissa fonteissa.