About NebulaKit
NEB_FONT_SIZE is the font size scale the typography presets and control sizes are built from. Steps from 11 to 20 cover body and interface text one pixel at a time, larger steps cover headings. Reach for a typography preset first, it pairs the size with a matching line height. Use the scale when you need a size on its own. fontSize accepts any CSS value, so you can step outside the scale whenever you need to.
Example
import { Text, NEB_FONT_SIZE } from '@nebula-kit/core' export const Price = ({ amount }) => ( <Text fontSize={NEB_FONT_SIZE.px_036} bold> {amount} </Text>) export const Hero = () => ( // presets and any CSS value work too <Text typography="h1" fontSize="64px"> Welcome </Text>)Scale
The presets and scale columns show where the library uses each step, as a typography preset or as a control scale.
| Name | Value | Sample | Presets | Scale |
|---|---|---|---|---|
px_011 | 11px | Aa | caption | - |
px_012 | 12px | Aa | - | - |
px_013 | 13px | Aa | small | xs |
px_014 | 14px | Aa | - | sm |
px_015 | 15px | Aa | body | md |
px_016 | 16px | Aa | h6 | lg |
px_017 | 17px | Aa | lead | xl |
px_018 | 18px | Aa | - | - |
px_019 | 19px | Aa | - | - |
px_020 | 20px | Aa | h5 | - |
px_024 | 24px | Aa | h4 | - |
px_030 | 30px | Aa | h3 | - |
px_036 | 36px | Aa | h2 | - |
px_048 | 48px | Aa | h1 | - |