• FRAMEWORK

Foundations

Typography Guidelines

Fonts

We should not use unlicensed fonts in font usage. It is critical that we pay attention to the fonts we use as follows according to the usage area of ​​the application.

In all web and mobile applications open to External Users, we need to use the Ford F-1 font family. In all web and mobile applications open to Internal Users, in cases where this font family cannot be used in Ford F-1 or Internal applications, the Roboto font family can be used.

Things We Need to Pay Attention to

It is critical to make sure that the fonts you use, especially on your website and all mobile applications of your brand, are licensed.

Please contact us before using a new font or in cases where you are in doubt.

Note: This does not pose a problem for applications that already use a FO UI Framework and do not add fonts by adding additional CSS and JS.
Font Font Family Use For Files
Ford F-1 Light, Regular, Medium, Semibold, Bold External Applications (Ford.com.tr, Ford Dealer Applications etc. ) WOFF2 OTF/TTF
Roboto Thin, Light, Regular, Medium, Semibold, Bold Internal Applications (MKS, DF etc.) WOFF2 OTF/TTF

Font Weight Uses

The FO UI Framework uses the Ford F‑1 font family as the primary corporate font. For internal applications where Ford F‑1 cannot be used, Roboto is allowed as fallback. No other fonts should be introduced to maintain visual consistency and brand integrity.

Note: Ensure you have the proper license before using Ford F‑1 outside approved Ford projects.
Weight Usage Preview
Regular (400) Body copy, legal text The quick brown fox
Medium (500) Subheadings, emphasized body text The quick brown fox
Semibold (600) Headings, short-dwell highlights The quick brown fox
Bold (700) Key emphasis only The quick brown fox

How to Include Fonts

There are two recommended ways to include the Ford F‑1 font in your project:

Performance Tip: Use font-display: swap and preload fonts via <link rel="preload"> for faster rendering.

Font Size Classes

These classes use clamp() for fluid typography between mobile and desktop breakpoints. They automatically adjust between min and max font sizes. Always use Ford F-1 font family.

Note: Typography utility classes (e.g., .fo-font-size-large) are defined with !important to ensure consistent font scaling across components and to override default component styles when necessary.
Class Size Range Preview
.fo-font-size-xxsmall 0.875rem – 1rem The quick brown fox jumps over the lazy dog
.fo-font-size-xsmall 1rem – 1.25rem The quick brown fox jumps over the lazy dog
.fo-font-size-small 1.125rem – 1.375rem The quick brown fox jumps over the lazy dog
.fo-font-size-normal 1.25rem – 1.5rem The quick brown fox jumps over the lazy dog
.fo-font-size-large 1.5rem – 2rem The quick brown fox jumps over the lazy dog
.fo-font-size-xlarge 2rem – 2.5rem The quick brown fox jumps over the lazy dog
.fo-font-size-xxlarge 2.5rem – 3rem The quick brown fox jumps over the lazy dog
.fo-font-size-xxxlarge 3rem – 4rem The quick brown fox jumps over the lazy dog

Responsive Example

This box demonstrates fluid font scaling between 320px and 1200px viewport widths.

Resize the browser window to see the font size change responsively.
For quick usage with utility classes, see Utilities / Text Utilities.