Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

capsize

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

capsize

Flipping how we define typography in CSS.

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.6K
decreased by-6.46%
Maintainers
2
Weekly downloads
 
Created
Source

npm


Capsize

Capsize makes the sizing and layout of text as predictable as every other element on the screen.

Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.



$ npm i --save capsize
import capsize from 'capsize';

const styles = capsize({
  capHeight: 16,
  lineGap: 8,
  fontMetrics: {
    capHeight: 700,
    ascent: 1058,
    descent: -291,
    lineGap: 0,
    unitsPerEm: 1000,
  },
});

Options

Text size

Capsize supports two methods of defining the size of text, capHeight and fontSize.

NOTE: You should only ever pass one or the other, not both.

capHeight: <number>

Sets the height of the capital letters to the defined value. Defining typography in this way makes aligning to a grid or with other elements, e.g. icons, a breeze.

Highlighting the cap height

fontSize: <number>

Setting the font size allows you to get all the benefits of the white space trimming, while still specifying an explicit font-size for your text. This can be useful when needed to match a concrete design spec or fitting into an existing product.

Highlighting the font size

Line height

Capsize supports two mental models for specifying line height, lineGap and leading. If you pass neither the text will follow the default spacing of the specified font, e.g. line-height: normal.

NOTE: You should only ever pass one or the other, not both.

lineGap: <number>

Sets the number of pixels between lines, as measured between the baseline and cap height of the next line.

Highlighting the line gap

leading: <number>

Sets the line height to the provided value as measured from the baseline of the text. This aligns the web with how typography is treated in design tools.

Highlighting the leading

Font Metrics

This metadata is extracted from the metrics tables inside the font itself. You can use the Capsize website to find these by selecting a font and referencing JavaScript tab in step 3.


Utilities

getCapHeight

Returns the actual rendered cap height for a specific font size given the provided font metrics.

import { getCapHeight } from 'capsize';

const actualCapHeight = getCapHeight({
  fontSize: 24,
  fontMetrics: {
    ...
  }
})


License

MIT.

Keywords

FAQs

Package last updated on 15 Mar 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc