Escala Tipográfica - Yampi Developer Portal

Os tamanhos são definidos em rem relativos ao --fonts-texts-size configurado no tema (padrão 14px). Use sempre essas variáveis em vez de valores fixos em px para manter consistência tipográfica entre temas.

Tamanhos de fonte

Variável	Equivalente (base 14px)
`--font-10`	10px
`--font-11`	11px
`--font-12`	12px
`--font-13`	13px
`--font-14`	14px (base)
`--font-15`	15px
`--font-16`	16px
`--font-17`	17px
`--font-18`	18px
`--font-20`	20px
`--font-21`	21px
`--font-22`	22px
`--font-24`	24px
`--font-25`	25px
`--font-27`	27px
`--font-28`	28px
`--font-30`	30px
`--font-48`	48px

Pesos de fonte

Resolvidos automaticamente com base na fonte escolhida (fonts_texts_family), pois nem todas as fontes suportam todos os pesos.

Variável	Descrição
`--font-regular`	Peso regular da fonte de textos.
`--font-medium`	Peso médio da fonte de textos.
`--font-bold`	Peso negrito da fonte de textos.
`--font-black`	Peso extra-negrito da fonte de textos.

Exemplo de uso

.meu-titulo {
    font-size: var(--font-24);
    font-weight: var(--font-bold);
    font-family: var(--fonts-titles-family);
}

.meu-texto {
    font-size: var(--font-14);
    font-weight: var(--font-regular);
    font-family: var(--fonts-texts-family);
}

⌘I