Type Scale
Type Scale
A Type Scale is the first stepping stone to a great user experience as it establishes a balanced and harmonious composition.
Cosmos standardizes the use of typography beyond just font sizes.
The typographic scale tightly couples the size of a text, its line-height, and the ideal spacing for providing a perfect vertical rhythm when laying out a long-form read.
Furthermore, Cosmos' type-scale standardizes font sizes for both mobile and desktop to allow consumers of the type-scale to interpolate the font size in-between seamlessly. To allow the line-height and spacing to adapt automatically, the scale defines them relative to the font size.


XXXX-large
cosmos-type-xxxx-large-font-size-mobile 45px
cosmos-type-xxxx-large-font-size-desktop 86px
cosmos-type-xxxx-large-line-height 1
cosmos-type-xxxx-large-spacing-top 0.55814em
cosmos-type-xxxx-large-spacing-bottom 0.255814em


XXX-large
cosmos-type-xxx-large-font-size-mobile 37px
cosmos-type-xxx-large-font-size-desktop 60px
cosmos-type-xxx-large-line-height 1.066667
cosmos-type-xxx-large-spacing-top 0.666667em
cosmos-type-xxx-large-spacing-bottom 0.333333em


XX-large
cosmos-type-xx-large-font-size-mobile 31px
cosmos-type-xx-large-font-size-desktop 41px
cosmos-type-xx-large-line-height 1.097561
cosmos-type-xx-large-spacing-top 0.829268em
cosmos-type-xx-large-spacing-bottom 0.439024em


X-large
cosmos-type-x-large-font-size-mobile 26px
cosmos-type-x-large-font-size-desktop 29px
cosmos-type-x-large-line-height 1.137931
cosmos-type-x-large-spacing-top 1.103448em
cosmos-type-x-large-spacing-bottom 0.413793em


Large
cosmos-type-large-font-size-mobile 22px
cosmos-type-large-font-size-desktop 24px
cosmos-type-large-line-height 1.333333
cosmos-type-large-spacing-top 1.083333em
cosmos-type-large-spacing-bottom 0.5em


Medium
cosmos-type-medium-font-size-mobile 18px
cosmos-type-medium-font-size-desktop 20px
cosmos-type-medium-line-height 1.5
cosmos-type-medium-spacing-top 0.6em
cosmos-type-medium-spacing-bottom 0.4em


Small
cosmos-type-small-font-size-mobile 17px
cosmos-type-small-font-size-desktop 17px
cosmos-type-small-line-height 1.411765
cosmos-type-small-spacing-top 0.705882em
cosmos-type-small-spacing-bottom 0.470588em


X-small
cosmos-type-x-small-font-size-mobile 14px
cosmos-type-x-small-font-size-desktop 14px
cosmos-type-x-small-line-height 1.357143
cosmos-type-x-small-spacing-top 0.714286em
cosmos-type-x-small-spacing-bottom 0.428571em


XX-small
cosmos-type-xx-small-font-size-mobile 12px
cosmos-type-xx-small-font-size-desktop 12px
cosmos-type-xx-small-line-height 1.25
cosmos-type-xx-small-spacing-top 0.666667em
cosmos-type-xx-small-spacing-bottom 0.333333em