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.45,
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 separate 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'
funstonTheme.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.45.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 5,635 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.