Typography
Typography tokens give you the flexibility to create any font style you'd like.
We've scoped our tokens down into a smaller collection you can use. See our text component for using text styles our sportsbook product.
Font Family
Name
Figma usage
Current value
Be a Caesar!
--font-family-sf-pro
SF Pro
system-ui, SF Pro (iOS only)
Be a Caesar!
--font-family-oswald
Oswald
Oswald
Be a Caesar!
--font-family-roboto-condensed
Roboto Condensed
Roboto Condensed
Font Size
Name
Figma usage
Current value
Be a Caesar!
--font-size-1
12px
0.75rem
Be a Caesar!
--font-size-2
14px
0.875rem
Be a Caesar!
--font-size-3
16px
1rem
Be a Caesar!
--font-size-4
18px
1.125rem
Be a Caesar!
--font-size-5
20px
1.25rem
Be a Caesar!
--font-size-6
22px
1.375rem
Be a Caesar!
--font-size-7
24px
1.5rem
Be a Caesar!
--font-size-8
28px
1.75rem
Be a Caesar!
--font-size-9
32px
2rem
Be a Caesar!
--font-size-10
36px
2.25rem
Be a Caesar!
--font-size-11
42px
2.625rem
Be a Caesar!
--font-size-12
48px
3rem
Be a Caesar!
--font-size-13
52px
3.25rem
Be a Caesar!
--font-size-14
58px
3.625rem
Be a Caesar!
--font-size-15
64px
4rem
Font Weight
Name
Figma usage
Current value
Be a Caesar!
--font-weight-thin
Thin
100
Be a Caesar!
--font-weight-light
Light
300
Be a Caesar!
--font-weight-regular
Regular
400
Be a Caesar!
--font-weight-medium
Medium
500
Be a Caesar!
--font-weight-semiBold
Semibold
600
Be a Caesar!
--font-weight-bold
Bold
700
Be a Caesar!
--font-weight-extraBold
Extrabold
800
Be a Caesar!
--font-weight-black
Black
900
Letter Spacing
Name
Figma usage
Current value
Be a Caesar!
--letter-spacing-1
-1px
-0.063rem
Be a Caesar!
--letter-spacing-2
-.75px
-0.047rem
Be a Caesar!
--letter-spacing-3
-.25px
-0.016rem
Be a Caesar!
--letter-spacing-4
0px
0rem
Be a Caesar!
--letter-spacing-5
.25px
0.016rem
Be a Caesar!
--letter-spacing-6
.5px
0.031rem
Be a Caesar!
--letter-spacing-7
.75px
0.047rem
Be a Caesar!
--letter-spacing-8
1px
0.063rem
Be a Caesar!
--letter-spacing-9
1.25px
0.078rem
Be a Caesar!
--letter-spacing-10
1.5px
0.094rem
Be a Caesar!
--letter-spacing-11
1.75px
0.109rem
Be a Caesar!
--letter-spacing-12
2px
0.125rem
Line Height
Name
Figma usage
Current value
Be a Caesar!
--line-height-1
16px
1rem
Be a Caesar!
--line-height-2
18px
1.125rem
Be a Caesar!
--line-height-3
20px
1.25rem
Be a Caesar!
--line-height-4
22px
1.375rem
Be a Caesar!
--line-height-5
24px
1.5rem
Be a Caesar!
--line-height-6
28px
1.75rem
Be a Caesar!
--line-height-7
32px
2rem
Be a Caesar!
--line-height-8
36px
2.25rem
Be a Caesar!
--line-height-9
48px
3rem
Be a Caesar!
--line-height-10
64px
4rem