Typesettings
Typesettings is a handful of utilities to help manage typsettings. It can be used with emotion, styled-components, or any other CSS-in-JS framework.
Install
yarn add typesettings-js
Contents
Getting Started
Typesettings
The first you'll want to do is create your typesettings object. This will be
used to create your styled (font) objects as well as a @font-face
declaration.
Example
const Typesettings = family: 'Helvetica Neue' fallbacks: '-apple-system' 'BlinkMacSystemFont' 'Arial' 'sans-serif' variants: fontStyle: 'normal' fontWeight: 400 sources: locals: 'Font Display Name' 'Font Postscript Name' eot: woff: woff2: ttf: normalcase: fontSize: 12 letterSpacing: -008 lineHeight: 18 fontSize: 14 letterSpacing: -015 lineHeight: 20 uppercase: fontSize: 12 letterSpacing: 01 lineHeight: null lowercase: fontSize: 12 letterSpacing: 01 lineHeight: null ;
Usage
Once you have your typesettings created, you can easily generate font style
objects and a @font-face
declaration to use throughout your app.
;;; const typesettings = // your typesettings object; const fontFace fonts = ; const TextLabel = ` ;`; ;
Configuration
Name | Type | Default | Description |
---|---|---|---|
cssFn |
Function |
undefined |
Returns font styles as css classnames instead of styled objects |
fontStyles |
Object |
undefined |
Additional styles that apply to all font styles |
fontFaceStyles |
Object |
undefined |
Additional styles that apply the @font-face declaration |
Class Names
By default, fonts
styles are returned as object styles while the fontFace
declaration is returned as a string. If you prefer, you can set the cssFn
option and css classnames will be returned instead.
; const options = cssFn: css;
Additional Font Styles
The fonts
object will return styles for font-family
, font-size
,
font-style
, font-weight
, letter-spacing
, line-height
, and
text-transform
. You can pass in an object of styles that will be added to
these using the fontStyles
option.
const options = fontStyles: textRendering: 'optimizeLegibility' fontFeatureSettings: '"tnum", "liga"' // and so on ... ;
Additional Font Face Styles
The fontFace
declaration will return styles for font-family
, font-style
,
and font-weight
as well as the font file src
. You can pass in an object of
styles that will be added to these using the fontFaceStyles
option.
const options = fontFaceStyles: fontDisplay: 'swap' // and so on ... ;
API
createFonts()
createFonts:object;
Create styled font objects to be used with CSS-in-JS frameworks from your
typesettings. You can pass in an object of additional
fontStyles
that will be added to these.
Example
;;; const options = fontStyles: textRendering: 'optimizeLegibility' WebkitFontSmoothing: 'antialiased' ; const fonts = ; /* Outputs an object of styled objects: { s10: { n400: { ... }, n400_caps: { ... }, i700: { ... }, i700_caps: { ... } ... }, s11: { ... } }*/ const Paragraph = ` ;`; ;
If you'd prefer to have objects of classnames, set a cssFn
in
the options.
;;;; const options = cssFn: css fontStyles: textRendering: 'optimizeLegibility' WebkitFontSmoothing: 'antialiased' ; const fonts = ; /* Outputs an object of classnames: { s10: { n400: classname, n400_caps: classname, i700: classname, i700_caps: classname ... }, s11: { ... } }*/ const Paragraph = ` ;`; ;
createFontFace()
object;
Generates a @font-face css declariation from typesettings. You can pass in an
object of additional fontFaceStyles
that will
be added to these.
Example
;;; const options = cssFn: css fontFaceStyles: fontDisplay: 'swap' ; const fontFace = ; ;
Utilities
getFontStack()
Normalizes the family name and all fallbacks, combining them both into a single font stack.
getFontStack:string;
normalizeFontFamily()
Returns a normalized FontFamily name where names with a space are automatically wrapped in quotes.
normalizeFontFamily:string;
parseSize()
Parses a number and unit string, returning only the number used
parseSize:string;
Typescript
Typescript types and interfaces are exported. You can import them as named
imports. TypeScript checks css properties with the object style syntax using
csstype
package.
Example typing and extending typesetting options
.
// foo.tsimport Interpolation SerializedStyles from '@emotion/core';import createFonts Typesettings TypesettingOptions from 'typesettings-js'; const typesettings: Typesettings = // your typesettings const options: TypesettingOptions = cssFn: css fontStyles: WebkitFontSmoothing: 'antialiaseddddd' // Mispelling error ^ Argument of type 'WebkitFontSmoothing: 'antialiaseddddd';' is not assignable ... fontFaceStyles: WebkitFontSmoothing: 'antialiased' // WebkitFontSmoothing is not a valid csstype property ^ Argument of type 'WebkitFontSmoothing: 'antialiased';' is not assignable ...