font-sans, font-serif, font-mono — the three stacks, fully themeable. This family contains 3 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
font-sansfont-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-seriffont-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-monofont-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

Example#

example
html
<p class="font-sans">UI text</p>
<code class="font-mono">snippet()</code>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Code blocks: font-mono + text-sm
  • Override stacks via theme.fontFamily

colors/index|Text color · utilities/typography/font-size|Font size