About NebulaKit
NEB_LINE_HEIGHT is the line height scale the typography presets and control sizes are built from. Values are unitless multipliers of the font size, so they keep their proportion at any size. The name is the value times 100, lh_140 is 1.4. Reach for a typography preset first, it pairs the line height with a matching size. lineHeight accepts any CSS value, so you can step outside the scale whenever you need to.
Choosing a value
Tight values from lh_100 to lh_120 suit single lines such as controls, labels and large headings. Values from lh_130 to lh_150 suit body text and smaller headings. Open values from lh_160 to lh_180 suit long-form reading, where extra space helps the eye find the next line.
Example
import { Text, NEB_LINE_HEIGHT } from '@nebula-kit/core' export const Article = ({ children }) => ( <Text lineHeight={NEB_LINE_HEIGHT.lh_160}>{children}</Text>) export const Label = ({ children }) => ( // any CSS value works too <Text lineHeight="20px">{children}</Text>)Scale
The presets and scale columns show where the library uses each step, as a typography preset or as a control scale. Wrapped marks the line height controls use when their text runs over several lines.
| Name | Value | Presets | Scale |
|---|---|---|---|
lh_100 | 1 | - | xs |
lh_110 | 1.1 | - | sm |
lh_120 | 1.2 | - | md, lg |
lh_130 | 1.3 | small, caption, h3, h2, h1 | xs wrapped, sm wrapped, xl |
lh_140 | 1.4 | body, lead, h6, h5, h4 | md wrapped |
lh_150 | 1.5 | - | lg wrapped, xl wrapped |
lh_160 | 1.6 | - | - |
lh_170 | 1.7 | - | - |
lh_180 | 1.8 | - | - |