Typography Tokens
Basic typography tokens for font families, sizes, weights, and line heights. These can be used in components or directly in your own styles. These are the foundation for typography in Corncob, but we recommend using them as a starting point and building on top of them with your own custom tokens as needed.
Nothing fancy here, just a simple system font stack for the body and a monospaced font stack for code. We don’t have strong opinions on which fonts you should use in your projects, IBM Plex is a popular open source font that pairs well with the system stack and has a lot of weights and styles, Roboto is another popular choice, and Inter is a newer font that has gained a lot of popularity in the design community. We recommend choosing fonts that fit the tone and style of your project, and that have good readability and accessibility.
:root {
/* Font Family */
--cc-font-family:
system-ui, -apple-system, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans',
'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--cc-font-family-mono: 'SFMono-Regular', consolas, 'Liberation Mono', menlo, courier, monospace;
}