# natural-scale > A simple ratio-based scale to make your type not bad Latest version **2.1.1** (published 2019-11-15) · MIT license · 0 weekly downloads ## Install ```sh npm install natural-scale pnpm add natural-scale yarn add natural-scale bun add natural-scale ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.1 | | Published | 2019-11-15 | | First published | 2018-05-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 360 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 8 | | Author | Jake LeBoeuf | | Maintainers | jakeleboeuf | | Keywords | type, scale, rhythm, modular, fractional, typography, size | ## Links - npm: https://www.npmjs.com/package/natural-scale - Repository: https://github.com/jakeleboeuf/natural-scale - Homepage: https://github.com/jakeleboeuf/natural-scale#readme - Issues: https://github.com/jakeleboeuf/natural-scale/issues - npm.io page: https://npm.io/package/natural-scale ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 2.1.1 (latest) — 2019-11-15 - 2.1.0 — 2019-11-15 - 2.0.0 — 2018-07-19 - 1.2.9 — 2018-05-21 - 1.2.8 — 2018-05-19 - 1.2.7 — 2018-05-17 - 1.2.6 — 2018-05-17 - 1.2.5 — 2018-05-04 - 1.2.4 — 2018-05-04 - 1.2.3 — 2018-05-04 - 1.2.2 — 2018-05-04 - 1.2.1 — 2018-05-03 - 1.2.0 — 2018-05-03 - 1.0.1 — 2018-05-03 - 1.0.0 — 2018-05-03 ## README # Natural Scale [![NPM][npm-badge-img]][npm-badge-link] [![downloads][downloads-badge]][npmcharts] [![Circle CI Status][circle-ci-badge]][circle-ci-url] [![Code Climate][codeclimate-badge]][codeclimate-url] [![Support Me][support-badge-image]][support-badge-url] **Natural Scale** is a JavaScript utility that makes creating beautiful, natural systems of scale a cinch. It's especially useful for creating a consistent [Type Scale](http://type-scale.com) accross your UI, but can be used in a veriety of ways. ###### Example of a Type Scale in action from type-scale.com ![type-scale.com Example](https://jklb-os.s3.amazonaws.com/samples/type-scale--example.gif) ### Basic Usage ```jsx import { Scale, Ratio } from "natural-scale"; // Create a Scale instance const Step = Scale({ interval: Ratio.GOLDEN_RATIO, unit: "rem" }); // Use it! const headingSize = Step(4); const subheadingSize = Step(3, "em"); // Optionally, you can override the unit of measure const bodySize = Step(2); ``` ### Works with your stuff `natural-scale` works great with your favorite UI Libraries like React and Vue. #### With React ```jsx import React from 'react'; import { render } from 'react-dom'; import * as glamorous from 'glamorous'; import { Scale, Ratio } from 'natural-scale'; const Step = Scale({interval: Ratio.MINOR_THIRD, unit: 'rem'}); const Title = glamorous.h1({ fontSize: Step(5); }); const SubTitle = glamorous.h2({ fontSize: Step(4); }); const Body = glamorous.p({ fontSize: Step(3); }); function App() { return ( <> Hey there! I'm a subtitle And I'm the body. I’m long- actually, not too long. Medium length. ); } render(, document.body); ``` #### With React Native Native looks for unitless scales. To help out, we'll pass in a base font size too ```jsx import React from "react"; import { Text, View } from "react-native"; import { Scale, Ratio } from "natural-scale"; const Step = Scale({ interval: Ratio.MINOR_THIRD, base: 16 }); const styles = StyleSheet.create({ container: { backgroundColor: "#ddd" }, message: { fontSize: Step(5) } }); export default () => { Welcome! ; }; ``` ### Intervals I've included some common intervals used in standard musical tuning systems. The following intervals can be used like so: ```jsx import { Scale, Ratio } from "natural-scale"; const Step = Scale({ interval: Ratio.MINOR_SECOND }); const step1 = Step(1); // 0.702 const step3 = Step(3); // 0.888 const step7 = Step(7); // 1.423 ``` ##### Standard Intervals | Name | API Name | Pitch Ratio | Interval | | ---------------- | ---------------- | ----------- | -------- | | Minor second | MINOR_SECOND | 16/15 | 1.067 | | Major Second | MAJOR_SECOND | 9/8 | 1.125 | | Minor Third | MINOR_THIRD | 6/5 | 1.2 | | Major Third | MAJOR_THIRD | 5/4 | 1.25 | | Perfect Fourth | PERFECT_FOURTH | 4/3 | 1.333 | | Augmented Fourth | AUGMENTED_FOURTH | 45/32 | 1.414 | | Perfect Fifth | PERFECT_FIFTH | 3/2 | 1.5 | | Minor Sixth | MINOR_SIXTH | 8/5 | 1.6 | | Major Sixth | MAJOR_SIXTH | 5/3 | 1.667 | | Minor Seventh | MINOR_SEVENTH | 16/9 | 1.778 | | Major Seventh | MAJOR_SEVENTH | 15/8 | 1.875 | | Perfect Octave | PERFECT_OCTAVE | 2/1 | 2 | | Golden Ratio | GOLDEN_RATIO | 1/φ | 1.618 | ### Custom Interval Of course you are free to experiment and find a scale that works well for you. ```jsx import { Scale } from "natural-scale"; const Step = Scale({ interval: 2.125, unit: "rem" }); const step1 = Step(1); // 0.104em const step3 = Step(3); // 0.47em const step7 = Step(7); // 9.595em ``` [npm-badge-img]: https://badge.fury.io/js/natural-scale.svg [npm-badge-link]: http://badge.fury.io/js/natural-scale [codeclimate-badge]: https://codeclimate.com/github/jakeleboeuf/natural-scale/badges/gpa.svg [codeclimate-url]: https://codeclimate.com/github/jakeleboeuf/natural-scale [coverage-badge]: https://codeclimate.com/github/jakeleboeuf/natural-scale/badges/coverage.svg [coverage-url]: https://codeclimate.com/github/jakeleboeuf/natural-scale/coverage [circle-ci-badge]: https://img.shields.io/circleci/project/github/jakeleboeuf/natural-scale.svg [circle-ci-url]: https://circleci.com/gh/jakeleboeuf/natural-scale [npmcharts]: http://npmcharts.com/compare/natural-scale [downloads-badge]: https://img.shields.io/npm/dw/natural-scale.svg [support-badge-image]: https://img.shields.io/badge/support-jake-0666d0.svg [support-badge-url]: https://commerce.coinbase.com/checkout/ec081042-4a98-42bf-bf04-e882a81db30f --- _Source: https://npm.io/package/natural-scale · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._