typography
Advanced tools
A powerful toolkit for building websites with beautiful typography.
A powerful toolkit for building websites with beautiful design.
npm install typography
http://kyleamathews.github.io/typography.js
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.
import Typography from 'typography'
const typography = new Typography({
baseFontSize: '18px',
baseLineHeight: 1.666,
headerFontFamily: ['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.toString()
// Or insert styles directly into the <head> (works well for client-only
// JS web apps.
typography.injectStyles()
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.
npm install --save typography-theme-funstonimport Typography from 'typography'
import funstonTheme from 'typography-theme-funston'
const typography = new Typography(funstonTheme)
Themes are just javascript objects so it's easy to modify them as needed. For example, if you're using the Funston theme but want to increase the base font size slightly:
import Typography from 'typography'
import funstonTheme from 'typography-theme-funston'
funstonTheme.baseFontSize = '22px' // was 20px.
const typography = new Typography(funstonTheme)
Or you can use the imperative API overrideThemeStyles to directly set/override
styles on a theme:
import Typography from 'typography'
import funstonTheme from 'typography-theme-funston'
funston.overrideThemeStyles = ({ rhythm }, options) => ({
'h2,h3': {
marginBottom: rhythm(1/2),
marginTop: rhythm(2),
}
})
const typography = new Typography(funstonTheme)
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,
typography-plugin-code.
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.
import Typography from 'typography'
import CodePlugin from 'typography-plugin-code'
import sternGroveTheme from 'typography-theme-stern-grove'
sternGroveTheme.plugins = [
new CodePlugin(),
]
const typography = new Typography(sternGroveTheme)
Typography.js includes two helper components for your React.js projects,
TypographyStyle and GoogleFont. These are ideal for
server-rendering.
TypographyStyle creates a style element and inserts the generated
CSS for your theme.GoogleFont creates 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 html.js file.
import { TypographyStyle, GoogleFont } from 'react-typography'
// Best practice is to have a typography module
// where you define your theme.
import typography from 'utils/typography'
// 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.
16px.1.5.h1 font size and the baseFontSize. So if the scale ratio is 2
and the baseFontSize is 16px then the h1 font size is 32px.{
scaleRatio: 2,
}
googleFonts: [
{
name: 'Montserrat',
styles: [
'700',
],
},
{
name: 'Merriweather',
styles: [
'400',
'400i',
'700',
'700i',
],
},
],
['Helvetica', 'sans-serif']. Defaults to a
system UI font stack.['georgia', 'serif'].inherit.hsl(0,0%,0%,0.8).bold.normal.bold.false.overrideStyles: ({ adjustFontSizeTo, rhythm }, options, styles) => ({
h1: {
fontFamily: ['Montserrat', 'sans-serif'].join(','),
},
blockquote: {
...adjustFontSizeTo('19px'),
color: gray(41),
fontStyle: 'italic',
paddingLeft: rhythm(13/16),
marginLeft: rhythm(-1),
borderLeft: `${rhythm(3/16)} solid ${gray(10)}`,
},
'blockquote > :last-child': {
marginBottom: 0,
},
})
overrideStyles but should be used in place of overrideStyles when
using a 3rd-party theme so as to not delete the theme's own
overrideStyles function.overrideThemeStyles: ({ rhythm }, options, styles) => ({
'h2,h3': {
marginBottom: rhythm(1/2),
marginTop: rhythm(2),
}
})
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]
FAQs
Opinionated toolkit for building websites with beautiful typography
The npm package typography receives a total of 6,402 weekly downloads. As such, typography popularity was classified as popular.
We found that typography demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.