Back to Components

Base Font Size

Overview

Base Font Size Compatibility is a component that enables applications that are not yet using Recipe's base font size to run in compatibility mode with a base font size of 14px.

info-icon
Out-of-the-box Recipe uses the correct base font size
Direct usage of this component is typically unnecessary except to support backwards-compatibility.
warning-icon
Browser support
A polyfill may be required when migrating from previous versions of Recipe. More information about browser support can be found below.

Best Practices

Base Font Size Compatibility should:

  • Only be used directly to support backwards-compatibility or testing scenarios. Most applications should use the default font size.

Examples

Compatibility Mode

Allows applications that are not yet using Recipe's base font size to run in compatibility mode with a base font size of 14px.

Code example
Playroom

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices finibus purus, in maximus diam molestie nec. Aenean maximus eget lacus sed lobortis.

Browser support

Recipe internally uses CSS custom properties and may require a polyfill to provide browser support depending on the specific requirements for your application. We recommend using the css-vars-ponyfill by jhildenbiddle in your application if you need to support IE11.

Current theme

Theme

Contents