A powerful toolkit for building websites with beautiful typography.
A powerful toolkit for building websites with beautiful design.
npm install typography
The goal of Typography.js is to provide a high-level elegant API for expressing typographic design intent.
Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating new Typography themes with CSS feels hard.
Typography.js provides a vastly simpler way to define and explore typography designs.
You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements.
Typography.js makes it easy to create designs that are unique, personal, and custom to your project.
Themes & Plugins
- plugins: Plugins are functions that extend or modify the core Typography engine. They can change how headers are styled or add specialized styles e.g. for code or tables.
Sites that use Typography.js
- bricolage.io (source)
- React Headroom (source)
- Gatsby Blog Starter (source)
- Edit this file to add yours!
const typography =baseFontSize: '18px'baseLineHeight: 145headerFontFamily: 'Avenir Next' 'Helvetica Neue' 'Segoe UI' 'Helvetica' 'Arial' 'sans-serif'bodyFontFamily: 'Georgia' 'serif'// See below for the full list of options.// Output CSS as string.typography// Or insert styles directly into the <head> (works well for client-only// JS web apps.typography
We maintain 30 (and counting) themes that are ready to use on your next project. These are each published as seperate NPM packages. Explore themes at http://kyleamathews.github.io/typography.js.
Here's an example of how to use the Funston theme.
- First save the package to your project
npm install --save typography-theme-funston
- Then import and pass into Typography when initializing.
const typography = funstonTheme
funstonThemebaseFontSize = '22px' // was 20px.const typography = funstonTheme
Or you can use the imperative API
overrideThemeStyles to directly set/override
styles on a theme:
funston'h2,h3':marginBottom:marginTop:const typography = funstonTheme
Published Typography.js Themes
- If you publish your own, create a PR to add it here!
Plugins are functions that extend or modify the core typography engine.
they can change how headers are styled or add specialized styles e.g.
for code or tables. Currently there's one plugin available,
To use the Code plugin, first install using NPM.
npm install --save typography-plugin-code
Then add to your theme before creating a new typography object.
sternGroveThemeplugins =const typography = sternGroveTheme
React.js helper components.
Typography.js includes two helper components for your React.js projects,
GoogleFont. These are ideal for
TypographyStylecreates a style element and inserts the generated CSS for your theme.
GoogleFontcreates the link element to include the Google Fonts & weights specified in your theme.
To use, first install the package
npm install --save react-typography
then import them into your
// Best practice is to have a typography module// where you define your theme.// Inside your React.js HTML component.<html><head><TypographyStyle typography=typography /><GoogleFont typography=typography /></head><body>// stuff</body></html>
When creating a new instance of Typography, you can pass in an configuration object. All configuration keys are optional.
- title: The theme title.
- baseFontSize: The base font size in pixels, defaults to
- baseLineHeight: The base line height using the css unitless number, defaults to
- scaleRatio: The "scale ratio" for the theme. This value is the ratio
h1font size and the
baseFontSize. So if the scale ratio is
h1font size is
- googleFonts: An array specifying Google Fonts for this project.
googleFonts:name: 'Montserrat'styles:'700'name: 'Merriweather'styles:'400''400i''700''700i'
- headerFontFamily: An array of strings specifying the font family
stack for headers e.g.
['Helvetica', 'sans-serif']. Defaults to a system UI font stack.
- bodyFontFamily: An array of strings specifying the font family
stack for the body, defaults to
- headerColor: A css color string to be set on headers. Defaults
- bodyColor: A css color string to be set for body text. Defaults
- headerWeight: Specify the font weight for headers. Defaults to
- bodyWeight: Specify the font weight for body text. Defaults to
- boldWeight: Specify the font weight for "bold" (b, strong, dt, th)
elements. Defaults to
- blockMarginBottom: Specify the default margin-bottom for block elements. Defaults to one "rhythm unit" (i.e. the height of the base line height).
- includeNormalize: Include normalize.css.
Normalize.css is an excellent project which works to normalize the
base browser CSS across browsers and serves as an excellent foundation
for Typography.js. We include normalize.CSS by default but if you're
already including it elsewhere in your project, you can disable
including it here by passing
- overrideStyles: Imperative API for directly adding to or overriding auto-generated styles. It's called with a Vertical Rhythm object, the options object, and the algorithmically generated styles.
h1:fontFamily: 'Montserrat' 'sans-serif'blockquote:...color:fontStyle: 'italic'paddingLeft:marginLeft:borderLeft: ` solid `'blockquote > :last-child':marginBottom: 0
- overrideThemeStyles: This has the same function signature as
overrideStylesbut should be used in place of
overrideStyleswhen using a 3rd-party theme so as to not delete the theme's own
Typography.js is a monorepo facilitated by Lerna.
TODO: document constants + compass-vertical-rhythm + using typgraphy.js for inline styles.
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]