Tipografia

Duas famílias da identidade idPlugger, incluídas no pacote em fonts.css (opcional), sem precisar carregar fonte do Google:

@import '@handsondigital/idplugger-ui/fonts.css';

Família	Onde	Token	Pesos
VAG Rundschrift D	Títulos h1 a h5	--font-brand-heading	peso único
Poppins	Todo o resto	--font-brand-body	400 a 700

O fonts.css declara os @font-face com url(./fonts/…) (cerca de 0,3 kB de CSS, mais ~55 kB de arquivos woff2, baixados só quando a fonte é usada). Bundlers como Vite e webpack copiam os arquivos sozinhos; se você servir o CSS sem bundler, mantenha a pasta fonts/ ao lado dele. O style.css não inclui fontes.

Variantes

Use o componente Typography em vez de estilizar textos à mão.

Exemplo: Typography, All Variants

const AllVariants = () => (
  // `caption` e `small` renderizam <small> (inline): a coluna flex mantem uma variante por linha.
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
    {variants.map((variant) => (
      <Typography key={variant} variant={variant}>
        {variant}: Participe da promoção
      </Typography>
    ))}
  </div>
);

• Títulos (VAG): h1 60px, h2 50, h3 40, h4 30, h5 24 (tamanhos desktop; h1 a h4 diminuem abaixo de 768px para 40, 30, 28 e 24px).
• Texto (Poppins): h6 20, body-large 18, body 16, footnote 14, caption 13, small 12, com line-height 1,5 e pesos 400 e 500.

Elemento e peso

A variante define o visual; as troca o elemento HTML (visual de h2 com a semântica de h1), e weight="medium" só afeta as variantes em Poppins.

Exemplo: Typography, As Different Element

const AsDifferentElement = () => <Typography variant="h2" as="h1">Título da página</Typography>;

Exemplo: Typography, Medium Weight

const MediumWeight = () => <Typography variant="body" weight="medium">Cadastre sua nota fiscal e participe</Typography>;

Titulo.tsx

import { Typography } from '@handsondigital/idplugger-ui'

<Typography variant="h2" as="h1">Título da página</Typography>

Props

Prop	Tipo	Padrão	Descrição
as	ElementType	—	Elemento HTML renderizado. Padrão: definido pela variante (h1–h6, p, small). Use para manter a semântica sem mudar o visual.
children	ReactNode	—	Conteúdo do texto.
className	string	—	Classe CSS extra.
variant	"small" | "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body-large" | "footnote"	body	Estilo tipográfico. Padrão: body.
weight	"regular" | "medium"	—	Só tem efeito nas variantes em Poppins; os títulos h1–h5 (VAG Rundschrift D) têm peso único. Padrão: regular.

Trocar as fontes de uma marca

Não importe o fonts.css: carregue as fontes da marca e sobrescreva as duas variáveis. Nenhuma fonte da idPlugger entra no CSS do hotsite.

minha-marca.css

:root {
  --font-brand-heading: 'Minha Fonte', sans-serif;
  --font-brand-body: 'Minha Fonte', sans-serif;
}

Veja o contrato completo em Marcas e presets.