Typography

Customizing Typography

Note: The information on this page is specific to Version 3, for Version 2 information on typography go to the Version 2 guide.

What is typography?

Typography is a way of arranging type to make text legible, readable, and appealing when displayed. The theming system supports customizing the typography settings for the library's components. Additionally, Ngs provides APIs for applying typography styles to elements in your own application.

Including font assets

NgStarter reads its base font from the --ngs-font-family-base theme token. You can use any font family, as long as the font files are loaded by your application. The easiest option is a Google Fonts link in src/index.html; self-hosted fonts work the same way through @font-face.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

Changing the app font

Override --ngs-font-family-base in the global stylesheet after importing the NgStarter theme. Components, form controls, tables, menus, overlays, and the mapped Tailwind --font-sans alias will inherit the new family.

:root,
[data-ngs-theme='default'] {
  --ngs-font-family-base: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

For a custom theme, put the same token inside that theme selector. Keep the fallback stack so the interface remains readable while the web font is loading or if the font request fails.

[data-ngs-theme='acme'] {
  --ngs-font-family-base: "DM Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.