• FRAMEWORK

Utilities

Typography

Typography

Typography utilities include classes for font families, font weights, font sizes, line heights, text alignment, text transformations, decorations, overflow handling, and highlights. Responsive variants are supported for text alignment and transforms.

Note:
  • xs is the default size (no prefix needed).
  • Use -sm-, -md-, -lg-, or -xl- for responsive variants.
  • Example: .fo-text-center (always center) or .fo-text-md-right (right align from md and above).
For detailed typography guidelines (font families, heading hierarchy), see Foundation / Typography.
Font Family

The current system font is Roboto. In the future, it will transition to Ford F1. Both are displayed below for reference:

Font Family Example
Roboto Regular .fo-font-regular Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Roboto Medium .fo-font-medium Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Roboto Bold .fo-font-bold Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ford F1 (Future) Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Font Weight
.fo-font-weight-lightfont-weight: 300
.fo-font-weight-regularfont-weight: 400
.fo-font-weight-mediumfont-weight: 500
.fo-font-weight-semiboldfont-weight: 600
.fo-font-weight-boldfont-weight: 700
.fo-font-weight-extraboldfont-weight: 800
Headings
<h1> / .fo-h1 2.5rem / bold

Heading 1
<h2> / .fo-h2 2rem / semibold

Heading 2
<h3> / .fo-h3 1.75rem / semibold

Heading 3
<h4> / .fo-h4 1.5rem / medium

Heading 4
<h5> / .fo-h5 1.25rem / medium
Heading 5
<h6> / .fo-h6 1rem / medium
Heading 6
Font Size (Clamp)
.fo-font-size-xxxlargeXxxlarge~3rem - 4rem
.fo-font-size-xxlargeXxlarge~2.5rem - 3rem
.fo-font-size-xlargeXlarge~2rem - 2.5rem
.fo-font-size-largeLarge~1.5rem - 2rem
.fo-font-size-normalNormal~1.25rem - 1.5rem
.fo-font-size-smallSmall~1.125rem - 1.375rem
.fo-font-size-xsmallXsmall~1rem - 1.25rem
.fo-font-size-xxsmallXxsmall~0.875rem - 1rem
Text Align
.fo-text-leftAlign left
.fo-text-centerAlign center
.fo-text-rightAlign right
.fo-text-justifyJustify

Responsive: .fo-text-md-center, .fo-text-lg-right

Text Transform
.fo-text-uppercaseUPPERCASE
.fo-text-lowercaselowercase
.fo-text-capitalizeCapitalize
.fo-text-noneNo transform
Text Decoration
.fo-underlineUnderline text
.fo-line-throughLine-through
.fo-no-underlineNo underline
Text Overflow & White-space
.fo-text-truncateSingle line ellipsis
.fo-text-ellipsis-22 lines ellipsis
.fo-text-ellipsis-33 lines ellipsis
.fo-whitespace-normalNormal
.fo-whitespace-nowrapNo wrap
.fo-whitespace-prePreserve spacing
Line Height
.fo-lh-tight1.25
.fo-lh-normal1.5
.fo-lh-loose2
.fo-lh-11
.fo-lh-1-51.5
.fo-lh-22
Highlights

Use highlights to mark important text with background colors:

.fo-highlight-primary Primary highlight
.fo-highlight-successSuccess highlight
.fo-highlight-info Info highlight
.fo-highlight-warningWarning highlight
.fo-highlight-errorError highlight
Textarea No Resize

Add .fo-no-resize to prevent manual resizing of textareas.