# Styles > Pick a text style and see the tokens behind it. Source: https://ngwr.dev/guides/typography/styles Updated in v15 ## Text styles Set `variant` on `[wrTypography]`; each variant reads the tokens listed under it. Ship the form today Account settings Billing Payment method Card details Billing address Tax ID Everything you need to start, nothing you have to remove later. Invoices are emailed on the first of each month. Prices exclude VAT where it applies. Updated 2 minutes ago Pricing - Standalone components - Signal inputs ## Tones `tone` changes the colour only, so the words still have to name the state. Invoices are sent monthly Updated 2 minutes ago Free for open source Payment received Card expires in 3 days Payment failed ## Hooks Set a hook on an element or a container to restyle only there. ## Long-form text Put `.wr-typeset` on a container of plain HTML; mark anything inside that is not text `.wr-not-typeset`. ### Release notes Version 15 moves charts and bits into their own folders. **Import paths change**; component names do not. The [typography overview](https://ngwr.dev/guides/typography/overview) has the rest. - Charts live under `ngwr/charts`. - Bits live under `ngwr/bits`. Update with one command: ``` ng update ngwr ``` Colour hooks, set on the container: Paragraph text Heading Intro paragraph Bold text Link inline code ● ● ● 1. 2. 3. Quoted text Figure caption ## Size Each step has a matching `-leading`; control text sizes are in [Sizing](https://ngwr.dev/guides/tokens/sizing). Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down ## Weight Regular for body text, heavier for what the eye should find first. Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down ## Line height Unitless; long paragraphs need more than short lines. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. ## Letter spacing Tighten large headings, widen small uppercase labels. Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down Signals all the way down ## Font family System fonts by default; set these on `:root` to use your own. Signals all the way down 0123456789 Signals all the way down 0123456789 ## Line breaking Classes that change where a line breaks. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. Invoices are emailed on the first of each month and stay available here for seven years after the account closes. ## See also - [wrTypography](https://ngwr.dev/reference/directives/typography) — Style any text element with a shared text role. - [Typography tokens](https://ngwr.dev/guides/tokens/typography) — Set type in your own styles with ngwr's font tokens. - [Colors](https://ngwr.dev/guides/tokens/colors) — The --wr-color-* tokens, and which one to use for fills, text and borders. - [Sizing](https://ngwr.dev/guides/tokens/sizing) — Size and round your own controls with ngwr's tokens.