Rhythm fns

Functions useful for calculating vertical rhythm. 🎵

Includes TypeScript and Flow types!

Install

Simply yarn add rhythm-fns, or the equivalent via npm.

API

The entire package exports just these 4 pure functions.

getBoxHeight

Calculates the height to apply to an element that uses height.

• baseFontSize - ratio between the base font size and line height
• baseLineRatio - absolute base font size used across the page
• heightScale - your element's desired height relative to the base line height

Returns the absolute height to apply to your element.

import { getBoxHeight } from 'rhythm-fns';
 
const height = getBoxHeight(16, 1.5, 1.125); // height = 27

getBoxMargin

Calculates the margin to apply to an element that uses height.

Params

• baseFontSize - ratio between the base font size and line height
• baseLineRatio - absolute base font size used across the page
• heightScale - your element's desired height relative to the base line height
• margins - extra margins relative to the base font size

Returns the absolute margin to apply to your element.

import { getBoxMargin } from 'rhythm-fns';
 
const marginTop = getBoxMargin(16, 1.5, 2.5, 1); // marginTop = 30
const marginBot = getBoxMargin(16, 1.5, 2.5, 2); // marginBot = 54

getLineHeight

Calculates the line height to apply to a text element.

Params

• baseFontSize - relative ratio between the base font size and line height
• baseLineRatio - absolute base font size used across the page
• fontSize - desired font size relative to the base font size

Returns the absolute line height to apply to your element.

import { getLineHeight } from 'rhythm-fns';
 
const height = getLineHeight(16, 1.5, 1.75); // height = 48

getLineMargin

Calculates the margin to apply to a text element.

Params

• baseFontSize ratio between the base font size and line height
• baseLineRatio absolute base font size used across the page
• margins extra margins relative to the base line height
• maybeBorder (optional) absolute border to subtract from the result

Returns the absolute margin to apply to your element.

import { getLineMargin } from 'rhythm-fns';
 
// without border
const marginTop = getLineMargin(16, 1.5, 1); // marginTop = 24
const marginBot = getLineMargin(16, 1.5, 2); // marginBot = 48
 
// with border
const marginBorderTop = getLineMargin(16, 1.5, 1, 1); // marginBorderTop = 23
const marginBorderBot = getLineMargin(16, 1.5, 2, 1); // marginBorderBot = 47

License

MIT