Line Height

Class	Properties
t.leadingNone	lineHeight: 16
t.leadingTight	lineHeight: 20
t.leadingSnug	lineHeight: 22
t.leadingNormal	lineHeight: 24
t.leadingRelaxed	lineHeight: 26
t.leadingLoose	lineHeight: 32
t.leading3	lineHeight: 12
t.leading4	lineHeight: 16
t.leading5	lineHeight: 20
t.leading6	lineHeight: 24
t.leading7	lineHeight: 28
t.leading8	lineHeight: 32
t.leading9	lineHeight: 36
t.leading10	lineHeight: 40
t.leading11	lineHeight: 44
t.leading12	lineHeight: 48
t.leading14	lineHeight: 56
t.leading16	lineHeight: 64
t.leading20	lineHeight: 80
t.leading24	lineHeight: 96
t.leading28	lineHeight: 112
t.leading32	lineHeight: 128
t.leading36	lineHeight: 144
t.leading40	lineHeight: 160
t.leading44	lineHeight: 176
t.leading48	lineHeight: 192
t.leading52	lineHeight: 208
t.leading56	lineHeight: 224
t.leading60	lineHeight: 240
t.leading64	lineHeight: 256
t.leading72	lineHeight: 288
t.leading80	lineHeight: 320
t.leading96	lineHeight: 384

Usage

Set the line height of a Text element using the t.leading{Size} utility classes.

Relative Line-Heights

Use the leadingNone, leadingTight, leadingSnug, leadingNormal, leadingRelaxed, and leadingLoose utilities to give an element a relative line-height based on the font size. This is provided for compatibility with Tailwind CSS, but due to limitations in React Native, the line height is always based on the base font size, not relative to the specified font size. Hence, this is mainly suitable for text bodies that use the default typography settings.

<Text style={[ t.leadingNone ]}>...</Text>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<Text style={[ t.leadingTight ]}>...</Text>

<Text style={[ t.leadingSnug ]}>...</Text>

<Text style={[ t.leadingNormal ]}>...</Text>

<Text style={[ t.leadingRelaxed ]}>...</Text>

<Text style={[ t.leadingLoose ]}>...</Text>

Fixed Line-Heights

Use the leading{Size} utilities to give an element a fixed line height, irrespective of the current font size. These are useful when you need very precise control over an element’s final size. The actual size is derived from the spacing theme property.

<Text style={[ t.leading3 ]}>...</Text>

<Text style={[ t.leading4 ]}>...</Text>

<Text style={[ t.leading5 ]}>...</Text>

<Text style={[ t.leading6 ]}>...</Text>

<Text style={[ t.leading7 ]}>...</Text>

<Text style={[ t.leading8 ]}>...</Text>

<Text style={[ t.leading9 ]}>...</Text>

<Text style={[ t.leading10 ]}>...</Text>