> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Teemaeditori - Typografia

> Määritä otsikoiden ja leipätekstin fonttiperheet ja kokoasteikko koko verkkokaupassa.

<Frame caption="Teemaeditori > Typografia">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-typography.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=a0048375a5a7ce12e74df96ebb6e1e79" alt="Typografia-asetusten paneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-typography.webp" />
</Frame>

Typografiapaneeli määrittää, mitkä fontit verkkokaupassa näkyvät ja minkä kokoisina ne piirretään. Fontit ladataan Google Fontsista — koko valikoima on käytettävissä pudotusvalikossa. Muutokset vaikuttavat kaikkiin sivuihin.

## Otsikot

| Asetus   | Tyyppi         | Oletus | Vaihteluväli            | Kuvaus                                                 |
| -------- | -------------- | ------ | ----------------------- | ------------------------------------------------------ |
| Fontti   | Pudotusvalikko | Inter  | Google Fonts -valikoima | Fonttiperhe kaikille otsikoille (H1–H3).               |
| Asteikko | Liukusäädin    | 100 %  | 50–150 %                | Skaalaa kaikkia otsikkokokoja suhteessa ylös tai alas. |

## Leipäteksti

| Asetus   | Tyyppi         | Oletus | Vaihteluväli            | Kuvaus                                                       |
| -------- | -------------- | ------ | ----------------------- | ------------------------------------------------------------ |
| Fontti   | Pudotusvalikko | Inter  | Google Fonts -valikoima | Fonttiperhe leipätekstille, nimikkeille ja kuvauksille.      |
| Asteikko | Liukusäädin    | 100 %  | 50–150 %                | Skaalaa kaikkia leipätekstin kokoja suhteessa ylös tai alas. |

<Note>
  Fonttiasteikko säätää kaikkia kokoja suhteessa — yksittäisiä otsikkotasoja (H1, H2, H3) tai leipätekstin kokoja ei voi määrittää erikseen. Käytä oletuskokoja asettamalla asteikoksi 100 %.
</Note>

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-heading-font-family: Inter;
    --storefront-heading-font-scale: 100%;
    --storefront-body-font-family: Inter;
    --storefront-body-font-scale: 100%;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>

  <Card title="Asettelu" icon="columns-3" href="/docs/fi/sales-channels/online-store/theme-editor/settings/layout">
    Määritä sivun leveys ja välistys.
  </Card>
</CardGroup>