npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

typography

v0.16.24

Published

Opinionated toolkit for building websites with beautiful typography

Downloads

32,218

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

kylemathewskylemathewsjxnblkjxnblk

Keywords

cssinline stylesreacttypographyvertical-rhythm

Readme

Typography.js

A powerful toolkit for building websites with beautiful typography.

Typography.js Build Status Coverage Status

A powerful toolkit for building websites with beautiful design.

Install

npm install typography

Demo/playground

http://kyleamathews.github.io/typography.js

Why

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

  • themes: Typography.js themes are simple Javascript objects. As such they're easy to share across projects or even open source and share via NPM.
  • 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

Javascript usage

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()

Themes

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.

Using themes

Here's an example of how to use the Funston theme.

  1. First save the package to your project npm install --save typography-theme-funston
  2. Then import and pass into Typography when initializing.
import Typography from 'typography'
import funstonTheme from 'typography-theme-funston'

const typography = new Typography(funstonTheme)

Customizing themes

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)

Published Typography.js Themes

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. 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)

React.js helper components.

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>

API

Configuration

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 16px.
  • baseLineHeight: The base line height using the css unitless number, defaults to 1.45.
  • scaleRatio: The "scale ratio" for the theme. This value is the ratio between the 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: 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 ['georgia', 'serif'].
  • headerColor: A css color string to be set on headers. Defaults to inherit.
  • bodyColor: A css color string to be set for body text. Defaults to hsl(0,0%,0%,0.8).
  • headerWeight: Specify the font weight for headers. Defaults to bold.
  • bodyWeight: Specify the font weight for body text. Defaults to normal.
  • boldWeight: Specify the font weight for "bold" (b, strong, dt, th) elements. Defaults to bold.
  • 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 false.
  • 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.
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,
  },
})
  • overrideThemeStyles: This has the same function signature as 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),
  }
})

Related

Developing Typography.js

Typography.js is a monorepo facilitated by Lerna.

TODO: document constants + compass-vertical-rhythm + using typgraphy.js for inline styles.

=======

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]