Stylus typography functions and type conversion
CSS JavaScript
Failed to load latest commit information.
lib Update and clean style Mar 12, 2013
test Update and clean style Mar 13, 2013
.editorconfig Initial commit. Feb 8, 2013
.gitattributes Initial commit. Feb 8, 2013
.gitignore Update gitignore file. Feb 9, 2013 Update usage instructions Apr 12, 2016
index.styl Initial commit. Feb 8, 2013
package.json 0.0.4 Mar 12, 2013

Stylus Type Utils

Much needed Stylus typeography unit coersion and normalization. Provides several common unit conversion functions to convert between types effortlessly and in sync with the content font size.


npm install stylus-type-utils --save

With Plugin Use

stylus -u stylus-type-utils app.styl

@import "type-utils";

With Direct Import

@import "node_modules/stylus-type-utils";


To use the stylus-type-utils library within your framework, use @import or use via the Stylus JS API.

base-font-size = 100% // Change to adjust the conversion process
support-for-ie = true // Set to `false` for no `px` output with `rem`

px(unit, ignore-base-font-size)
pt(unit, ignore-base-font-size)
em(unit, ignore-base-font-size)
rem(unit, ignore-base-font-size)
percent(unit, ignore-base-font-size)

When using the functions, omitting a unit type will assume the function unit type. E.g. px(16) -> px(16px).

The second parameter, ignore-base-font-size, allows the function to act as if the base-font-size was to set 100%.

Example Usage

@import "node_modules/stylus-type-utils"

base-font-size = 75%

px(16) // 12px
px(16, true) // 16px
px(16px) // 12px
px(1.2em) // 14.4px
em(16px) // 0.75em

rem(16px) // 12px, 0.75rem

support-for-ie = false // No more px + rem output when using rem function

rem(16px) // 0.75rem
rem(16px, true) // 1rem

base-font-size = 100%

rem(16px) // 1rem