Magma sets text in four families of styles: title for headings and actions, info for the text of the interface, read for long reading, code for code. Set a style as a whole, through one class or one prop, rather than composing a font, a size and a weight: the style keeps them together, with its line height and letter spacing.

Type scale

Each style below is set with mds-text, in the component’s own typography; its first column is what the style looks like on this page. 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

Three ways to set a style:

<mds-text typography="h3">Invoices</mds-text>
<h2 class="text-title-h3">Invoices</h2>
<p class="typography-read-paragraph">Plain CSS, no Tailwind.</p>

mds-text takes the style in its typography prop; variant="read" switches paragraph, detail and caption from the info family to the read one.Tailwind: the text-<family>-<style> utilities of styles/dist/tailwind/typography.css.Plain CSS: the typography-<family>-<style> classes of styles/dist/css/utility-typography.css, imported in the utilities layer.

Font families

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 does not bundle the fonts. Load the weights of the scale, for example with Fontsource: Roboto 500, 700 and 900 (titles and actions), Karla 400 and 700 (interface text), Merriweather 300, 400 and 700 (reading text), Roboto Mono 400 (code).

Line heights

The leading scale the styles take their line height from, also for text set by hand. --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