Magma compone il testo in quattro famiglie di stili: title per titoli e azioni, info per il testo dell’interfaccia, read per la lettura lunga, code per il codice. Applica uno stile per intero, con una classe o una prop, invece di comporre font, dimensione e peso: lo stile li tiene insieme, con la sua interlinea e la sua spaziatura.

Scala tipografica

Ogni stile qui sotto è composto con mds-text, nella typography del componente; la prima colonna mostra com’è lo stile in questa pagina. title h1text-title-h1typography-title-h13rem3rem900-0.025em--font-title

title h2text-title-h2typography-title-h22.25rem2.5rem900-0.025em--font-title

title h3text-title-h3typography-title-h31.875rem2.25rem900-0.025em--font-title

title h4text-title-h4typography-title-h41.5rem2rem900-0.025em--font-title

title h5text-title-h5typography-title-h51.25rem1.75rem900-0.025em--font-title

title h6text-title-h6typography-title-h61rem1.5rem700-0.025em--font-title

title actiontext-title-actiontypography-title-action0.875rem1.5rem500 - --font-title

info paragraphtext-info-paragraphtypography-info-paragraph1.25rem2rem400 - --font-info

info detailtext-info-detailtypography-info-detail1rem1.5rem400 - --font-info

info captiontext-info-captiontypography-info-caption0.875rem1.25rem400 - --font-info

info labeltext-info-labeltypography-info-label0.75rem1rem700 - --font-info

info optiontext-info-optiontypography-info-option0.625rem0.625rem700-0.025em--font-info

info tiptext-info-tiptypography-info-tip0.75rem1rem400 - --font-info

read paragraphtext-read-paragraphtypography-read-paragraph1.25rem2rem300 - --font-read

read detailtext-read-detailtypography-read-detail1rem1.5rem300 - --font-read

read captiontext-read-captiontypography-read-caption0.875rem1.25rem400 - --font-read

code snippettext-code-snippettypography-code-snippet1rem1.5rem400 - --font-code

code hacktext-code-hacktypography-code-hack0.875rem1.25rem400 - --font-code

Tre modi di applicare uno stile:

<mds-text typography="h3">Fatture</mds-text>
<h2 class="text-title-h3">Fatture</h2>
<p class="typography-read-paragraph">CSS puro, senza Tailwind.</p>

mds-text prende lo stile nella prop typography; variant="read" porta paragraph, detail e caption dalla famiglia info alla famiglia read.Tailwind: le utility text-<famiglia>-<stile> di styles/dist/tailwind/typography.css.CSS puro: le classi typography-<famiglia>-<stile> di styles/dist/css/utility-typography.css, importate nel layer utilities.

Famiglie di font

Aa--font-titlefont-titleRoboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Aa--font-infofont-infoKarla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Aa--font-readfont-readMerriweather, Times, 'Times New Roman', serif

Aa--font-codefont-code'Roboto Mono', 'Courier New', monospace

Magma non include i font. Carica i pesi della scala, per esempio con Fontsource: Roboto 500, 700 e 900 (titoli e azioni), Karla 400 e 700 (testo dell’interfaccia), Merriweather 300, 400 e 700 (testo da leggere), Roboto Mono 400 (codice).

Interlinee

La scala da cui gli stili prendono l’interlinea, anche per il testo composto a mano. --leading-2xsleading-2xs0.625rem

--leading-xsleading-xs1rem

--leading-smleading-sm1.25rem

--leading-mdleading-md1.5rem

--leading-lgleading-lg1.75rem

--leading-xlleading-xl2rem

--leading-2xlleading-2xl2.25rem

--leading-3xlleading-3xl2.5rem

--leading-4xlleading-4xl3rem