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.