Typography

Font Family

For headings, Kanit font is used and is available on Google Fonts.

Fizz uses Inter as the body copy font, 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).

fizz-heading-1 | 32px/40px

Beverage Ordering Has Never Been Easier

fizz-heading-2 | 24px/36px

Beverage Ordering Has Never Been Easier

fizz-heading-3 | 20px/30px

Beverage Ordering Has Never Been Easier

fizz-heading-4 | 16px/24px

Beverage Ordering Has Never Been Easier

Text

fizz-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.

fizz-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.

fizz-text-small | 12px/18px

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.

fizz-text-eyebrow | 12px/20px | Semi-bold (600) | Gray-500

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.

fizz-text-tiny | 10px/12px | Semi-bold (600) | Uppercase

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.

Emphasis

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

fizz-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.

fizz-text-subdued

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.