Typography Magic!
Getting Vertical Rhythm as never been so easy! Pass typoRhythm( size )
and it calculates the appropriate font-size
, line-height
in ems.
Installing
Available on npm
$ npm install --S typorhythm
Demo
See the Pen TypoRhythm on CodePen and the Inline JavaScript Version TypoRhythm JS on CodePen
API
Parameters:
size
expects anumber
e.g.14, 26, 47, 56
padding
expects anumber
e.g.0.5, 1, 2
*base:24
margin
expects anumber
e.g.0.5, 1, 2
*base:24
line-height
expects anumber
e.g.0.5, 1, 2
*base:24
, should be left tonull
unit
expect astring
e.g.em, rem
Using in JavaScript (React)
Component { return <h1 style= > Hello World </h1> }
Result
fontSize: "2.9375em" padding: null marginBottom: "0.5106382978723404em" lineHeight: 10212765957446808
Change the default base
or fontsize
:
const typoRhythm = 14 32
Using in Sass
Import typoRhythm in your project
;
Include it in your element
h3
TypoRhythm will do the rhythmic math for you in ems
and compile to css:
Change the default base
or fontsize
:
;;
Example:
h3
typoRhythmGenerator
Style multiple elements at once!
;
/*......You get the gist!*/
Keep the Rhythm going!