Tipografia

Visão ao vivo

Storybook mds-styles (HTML/CSS) — foundations-typography ↗

Fonte: "Manrope", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji". Token: --mds-font-family.

Pesos: --mds-font-weight-light 300 · --mds-font-weight-normal 400 · --mds-font-weight-semibold 600 · --mds-font-weight-bold 700 (peso padrão de botões: semibold).

Escala de tamanho (--mds-font-size-*)

Token	px
xs	12
sm	14
md	16
lg	20
xl	24
xxl	32
xxxl	40
hg	48
xhg	56
xxhg	64

Hierarquia semântica (classes atuais, prefixo mds-)

Classe	Tamanho	Peso	Line-height
.mds-headline--h1	64px	700	125%
.mds-headline--h2	48px	700	125%
.mds-headline--h3	32px	700	125%
.mds-headline	24px	700	125%
.mds-headline--h4	24px	700	125%
.mds-title--lg	20px	700	125%
.mds-title	16px	700	125%
.mds-title--md	16px	700	125%
.mds-title--sm	14px	700	125%
.mds-body--lg	20px	400	150%
.mds-body	16px	400	150%
.mds-body--md	16px	400	150%
.mds-body--sm	14px	400	150%
.mds-body--xs	12px	400	150%

Classes legadas (sem prefixo, @deprecated no SCSS — não usar em código novo)

Classe	Tamanho	Peso	Line-height
.display2	40px	300	125%
.display	32px	700	125%
.title	24px	400	125%
.subtitle	20px	700	125%
.body	16px	400	150%
.small	14px	400	150%
.caption	14px	700	125%
.helper-text	12px	400	150%

Também existem diretivas Angular equivalentes às classes atuais: mdsHeadline="h1|h2|h3|h4", mdsTitle="lg|md|sm", mdsParagraph="lg|md|sm|xs".

Alinhamento: .text-left (padrão) / .text-center / .text-right / .text-justify. Transformação: .text-uppercase / .text-lowercase / .text-capitalize. Overflow: .text-ellipsis, .text-nowrap, .text-wrap.

---