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/40pxBeverage Ordering Has Never Been Easier
heading-2 | 24px/36pxBeverage Ordering Has Never Been Easier
heading-3 | 20px/30pxBeverage Ordering Has Never Been Easier
heading-4 | 16px/24pxText
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/24pxMake 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/20pxMake 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/18pxEmphasis
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-strongMake 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