Text effects and REM sizes

These text options are reaching workspaces in stages, so you may not see all of them yet.

Outline and gradient text

Select a text, and in the Text section choose Add style:

• Stroke draws an outline round the letters: set its Stroke width and Stroke color.
• Text fill fills the letters with a solid colour, a gradient or a conic gradient, picked in the colour picker.

The text stays text: visitors can still select it, and screen readers read it as they would any text. Check that a gradient stays readable on what is behind it, at both ends.

How links look

A text style sets how links in its text look, for each state: Default, Hover and Current page (a link to the page the visitor is on). Open the text style from Assets, and under Links pick the state, then set:

• the link's colour;
• Underline, and its Line color, Thickness, Offset from the text and Line style.

A single text can also get its own underline from Add style → Decoration in the Text section.

Sizes in rem

A size in px is the same for every visitor. A size in rem grows with the text size a visitor chose in their browser, which helps people who read with larger text.

• In Typography, the Size, Letter spacing and Paragraph spacing fields take px or rem. Next to a rem value, the panel shows the px it comes to at this breakpoint.
• How many px one rem is depends on the breakpoint: in Breakpoints, each one has its px = 1 rem. A new site starts at 16, and a breakpoint you leave empty takes the one it inherits from. A smaller base on the phone breakpoint makes all rem text a little smaller there at once.