You can use Webflow’s built-in Color contrast checker to assess the contrast ratio of your text against its background.

High contrast doesn’t mean we stop considering other things like font weight (a super thin font that happens to have high-contrast against the background is still super illegible.) But higher contrast usually leads to increased legibility, which is a great thing on the web. On the right is purple text on a lighter purple background with a 2.39:1 ratio that shows a fail rating. It has a ratio of 7.06:1 with a AAA rating based on WCAG guidelines. On the left is dark purple text on a light purple background. Two color contrast results from Colorable. Thin fonts are extremely difficult to read - not only in Headings, but especially in paragraphs. Let’s look at some easy places to start making the web more accessible and inclusive when it comes to typography. Accessibility and inclusive typographyĪccessibility and inclusive design are important to consider when designing for the web. We can see these changes right on the canvas, and simulate browser and device widths at any time. The best way to get familiar with your options is to try them out inside a project and see how they interact. We have alternatives like ems, rems, percentages, viewport widths, and CH. When it comes to font size, in most cases, pixel values are a safe bet. CHĬH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line.įor example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph’s typeface), and sets the paragraph’s boundary (its box) to equal the width of 60 zeros.ĬH lets you set the WIDTH on a text element when you’re trying to limit the number of characters (again, based on the width of the font’s zero character.) VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport. Like ems, percentage refers to the parent element's font size. This has the benefit of respecting a user’s browser preferences (if custom text size is set on the browser). to 20 pixels) in the Style panel under TypographyĪ rem is calculated by taking your rem value and multiplying it by the HTML font size (which, unless you manually change it in the code, will respect the browser’s font size).

You can also set the font size on a paragraph’s parent element, like a Div block: Ems look to their parent element and scale the font size proportionally. This is a great way to set defaults on a project.Īn em was originally based on the width of a typeface’s capital M. Changes to this tag (like the font) will pass down to all your text. The Body (All Pages) tag is the top-level tag.

Click into the Selector field in the Style panel.

It’s common to use this technique to set global font styles on the body tag, to align text and other elements inside of sections, and to override default link block styles. You can set text styles on parent elements to apply to their child elements and override these styles in the child element settings.

Parent elements can pass text style information down to their children. When the background is clipped to text, it will ignore the font color and use the color in your Backgrounds section. You can put any background (or stack multiple backgrounds) using this method. When you make a change to the gradient, it updates inside the text in realtime.

Tap forms font size