Skip to docs navigation

Typography

Global settings

Relevant variables for global typography adjustments:

  • $font-family-base
  • $font-size-base
  • $line-height-base

Fonts

Gordita

Gordita is used globally for both headings and body copy and we utilize 4 different weights.

Bold

.fw-bold

Medium

.fw-medium

Normal

.fw-normal

Light

.fw-light

Font size

Example Size/Leading
(default) (default)

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Lorem ipsum dolor sit amet, erant dolor phaedrum.

 16/24
.lead

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Lorem ipsum dolor sit amet, erant dolor phaedrum.

 20/32
.caption

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Lorem ipsum dolor sit amet, erant dolor phaedrum.

 14/24
`` .small

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Lorem ipsum dolor sit amet, erant dolor phaedrum.

 12/21
.tiny

Lorem ipsum dolor sit amet, erant dolor phaedrum.

Lorem ipsum dolor sit amet, erant dolor phaedrum.

 10/16
More on headline sizes

Customize your available font-sizes by modifying the $font-sizes Sass map.

Responsive Font Size (RFS)

RFS can rescale font sizes and most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

The mechanism automatically calculates the appropriate values based on the dimensions of the browser viewport. It will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior.

Mixins

The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, and padding-left. See the example below for source Sass and compiled CSS.

The rfs() mixin has shorthands for font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, and padding-left. See the example below for source Sass and compiled CSS.

Any other property can be passed to the rfs() mixin like this:

!important can also just be added to whatever value you want:

  • rfs-value() converts a value into a rem value if a px value is passed, in other cases it returns the same result.
  • rfs-fluid-value() returns the fluid version of a value if the property needs rescaling.

Functions

When you don’t want to use the includes, there are also two functions:

- `rfs-value()` converts a value into a `rem` value if a `px` value is passed, in other cases it returns the same result. - `rfs-fluid-value()` returns the fluid version of a value if the property needs rescaling.

In this example, we use one of Bootstrap’s built-in responsive breakpoint mixins to only apply styling below the lg breakpoint.

Font weight and italics

Bold text.

Bolder weight text (relative to the parent element).

Medium weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Text alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

Note that we don’t provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.

Text wrapping and overflow

This text should wrap.

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.

Word break

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Note that breaking words isn’t possible in Arabic, which is the most used RTL language. Therefore .text-break is removed from our RTL compiled CSS.

Text Truncation

Praeterea iter est quasdam res quas ex communi.
Praeterea iter est quasdam res quas ex communi.

Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Text decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Inline text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

If you’re not concerned about semantic markup and you only want the styles, use the following classes instead:

  • .mark will apply the same styles as <mark>.
  • .small will apply the same styles as <small>.
  • .text-decoration-underline will apply the same styles as <u>.
  • .text-decoration-line-through will apply the same styles as <s>.

Line height

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

Monospace

This is in monospace

Reset color

Muted text with a reset link.

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

Add .initialism to an abbreviation for a slightly smaller font-size.

attr

HTML

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Naming a source

The HTML spec requires that blockquote attribution be placed outside the <blockquote>. When providing attribution, wrap your <blockquote> in a <figure> and use a <figcaption> or a block level element (e.g., <p>) with the .blockquote-footer class. Be sure to wrap the name of the source work in <cite> as well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title