Typography
Beans type is organized into named families, each with its own steps, bundling font-size and line-height together so the two are never hand-paired at a call site.
Text
| Name | Desktop | Mobile |
|---|---|---|
4xl--font-weight-base | Aa--font-size-4xl | Aa--font-size-3xl |
4xl-strong--font-weight-emphasis | Aa--font-size-4xl | Aa--font-size-3xl |
4xl-stronger--font-weight-accent | Aa--font-size-4xl | Aa--font-size-3xl |
3xl--font-weight-base | Aa--font-size-3xl | Aa--font-size-3xl |
3xl-strong--font-weight-emphasis | Aa--font-size-3xl | Aa--font-size-3xl |
3xl-stronger--font-weight-accent | Aa--font-size-3xl | Aa--font-size-3xl |
2xl--font-weight-base | Aa--font-size-2xl | Aa--font-size-2xl |
2xl-strong--font-weight-emphasis | Aa--font-size-2xl | Aa--font-size-2xl |
2xl-stronger--font-weight-accent | Aa--font-size-2xl | Aa--font-size-2xl |
xl--font-weight-base | Aa--font-size-xl | Aa--font-size-xl |
xl-strong--font-weight-emphasis | Aa--font-size-xl | Aa--font-size-xl |
xl-stronger--font-weight-accent | Aa--font-size-xl | Aa--font-size-xl |
lg--font-weight-base | Aa--font-size-lg | Aa--font-size-lg |
lg-strong--font-weight-emphasis | Aa--font-size-lg | Aa--font-size-lg |
lg-stronger--font-weight-accent | Aa--font-size-lg | Aa--font-size-lg |
md--font-weight-base | Aa--font-size-md | Aa--font-size-md |
md-strong--font-weight-emphasis | Aa--font-size-md | Aa--font-size-md |
md-stronger--font-weight-accent | Aa--font-size-md | Aa--font-size-md |
sm--font-weight-base | Aa--font-size-sm | Aa--font-size-sm |
sm-strong--font-weight-emphasis | Aa--font-size-sm | Aa--font-size-sm |
sm-stronger--font-weight-accent | Aa--font-size-sm | Aa--font-size-sm |
xs--font-weight-base | Aa--font-size-xs | Aa--font-size-xs |
xs-strong--font-weight-emphasis | Aa--font-size-xs | Aa--font-size-xs |
xs-stronger--font-weight-accent | Aa--font-size-xs | Aa--font-size-xs |
2xs--font-weight-base | Aa--font-size-2xs | Aa--font-size-2xs |
2xs-strong--font-weight-emphasis | Aa--font-size-2xs | Aa--font-size-2xs |
2xs-stronger--font-weight-accent | Aa--font-size-2xs | Aa--font-size-2xs |
3xs--font-weight-base | Aa--font-size-3xs | Aa--font-size-3xs |
3xs-strong--font-weight-emphasis | Aa--font-size-3xs | Aa--font-size-3xs |
3xs-stronger--font-weight-accent | Aa--font-size-3xs | Aa--font-size-3xs |