Bain Logo

Text

Jump to Props

A component for all typography

The ADAPT Design System has two typefaces:

  • Graphik (default, sans-serif)
  • Tiempos (alt, serif)

The sans-serif typeface should be used for most text, however when presenting more editorial or expressive content, or you have a general need for a serif typeface, you could use serif.

Import

Use

Hi!

Color

Colored text should be used minimally – color conveys meaning and if used unnecessarily or purely just to decorate things, it can cause more confusion for the user. `

If your product feels a little dull, consider introducing iconography, illustration or light tints to backgrounds instead of just changing text color.

By default, all text is set to the color defined in the default theme under the colors.text key. This should generally be black. Note for those implementing a "dark mode" - here you might want to invert the text color to white when in dark mode.

Subdued (Gray) Text

To add a balance to screens, it's often handy to have a "grey text" option that makes subheaders, info text etc less visually prominent.

Avoid picking random "grey" colors for subdued text. Instead, set the color to "subduedText" to maintain a consistent use of gray.

Example:

I am the default color

I am the subdued color

I am the default color

I am the subdued color

Font Weights

Both of these typefaces come in two font weights; normal and bold.

To set these with the Text component, set the fontWeight prop to either value. The default is normal.

Normal

Bold

Normal

Bold

Font Sizes

You should always use font sizes from the Design System. The sizes are set in the theme provided by AdaptThemeProvider, and in Figma as Text Styles.

Developers and Designers should speak about the text sizes chosen. For Designers, Figma provides them with the same options as outlined below. Font size discussions should use terms like "small text here, body text there" instead of "12px here, 18px there".

If you and your designer have decided to override the default sizes and/or naming of variants, the variant prop will read those as long as you've passed them to the AdaptThemeProvider.

Font sizes from default theme:

Sans-Serif font

tiny

[10px]

caption

[12px]

small

[12px]

body

[14px]

lead

[24px]

h5

[17px]

h4

[21px]

h3

[24px]

h2

[28px]

h1

[34px]

hero

[77px]

uber

[111px]

Try it out

Change the variant prop to any of the keys listed above. You can also try changing the fontWeight prop to bold;

Try Me

Semantic Markup

Setting the font size also hints at what type of HTML element should be created. For instance, a font size of h1 generally suggests that the element should be a <h1> element. Set this using Emotion's as prop:

I'm the main header

And I'm a small bit of text.And I am a link

You could also go as far as creating your own wrapper, depending on how you like to DRY things:

I'm the main header

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
fontFamilydefault | alt | {custom}default

Which of theme's fonts to use.

fontWeightstring

Which of theme's font weights to use.

colorstringinherit

Color of the text. Default set to `inherit` in order to have the component behave like usual primitives.

varianttiny | caption | small | body | lead | h5 | h4 | h3 | h2 | h1 | hero | uberbody

Defines the font size as a variant set in the theme. Avoid overriding with custom values.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy