Typography

Font Family

Fizz uses Inter, a variable font available on Google Fonts.

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()

Typographic System

Our typographic system has predefined combinations of font size, line height and font weight. These are applied as type styles in Figma and as CSS classes on web. Additionally, color can be applied to any of these styles but should be limited to specific uses outlined below.

Headings

Headings are used for page or section titles/subtitles. There are four sizes available. All headings are Semibold (600) and have a default color of Blue-800.

Beverage Ordering Has Never Been Easier

heading-1 | 32px/40px

Beverage Ordering Has Never Been Easier

heading-2 | 24px/36px

Beverage Ordering Has Never Been Easier

heading-3 | 20px/30px

Beverage Ordering Has Never Been Easier

heading-4 | 16px/24px

Text

There are three sizes available for text. All text styles are Regular (400) and have a default color of Black.

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

text-large | 16px/24px

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

text-medium | 14px/20px

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

text-small | 12px/18px

Emphasis

Use emphasis to further differentiate text styles and provide heirarchy. Strong text uses Semibold (600), while subdued text applies a lighter text color.

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

text-strong

Make the ordering process a breeze. As a bar, retailer or sales rep, you can save time by managing orders in one place, from any device, for FREE.

text-subdued