landing page screenshot

Line-height Picker

A front-end web app that helps web designers / developers pick the best line-height value for their websites

URL

https://line-height-picker.vercel.app, where you will find more detail about the app (motivation, how to use, etc.).

Features

In essence, Line-height Picker converts three user inputs

Font file (.otf, .ttf, .woff)
X-height value in pixel
Ratio of x-height to line-height

into the CSS values of

font-size
line-height
margin-top (to set the space between paragraphs)

In addition, the app uses these CSS values to render two paragraphs excerpted from Steve Jobs's famous speech in the user-selected font. This way, the user can check whether they are happy with the result. preview page screenshot

JS libraries used

opentype.js to extract the font metrics of the user-selected font
React (via Create React App)
React Router
React Transition Group
Styled Components
store.js

Web APIs used

Clipboard
Constraint Validation
FileReader
FontFace to render sample paragraphs in the user-selected font

How the app works

Step 1

After the user selects a font file, FileReader API reads the file content.
Then opentype.js extracts font metric values.
Finally, FontFace API stores the font rendering information.
The URL will automatically change to https://line-height-picker.vercel.app/x-height with history.push from React Router, and page transition animation is activated with React Transition Group.
The new page displays the font name by using the extracted font metric values.

Step 2

After the user enters an x-height value, its validity is checked with Constraint Validation API.
The x-height value will then be converted into the font-size CSS value by using the extracted font metric values.
When the user clicks the "Next" button, the URL changes to https://line-height-picker.vercel.app/modular-scale (with React Router and React Transition Group as before).
The new page displays the x-height value along with the font name.

Step 3

After the user enters the ratio of x-height to line-height, its validity is checked with Constraint Validation API.
The ratio values will then be converted into the line-height and margin-top CSS values by using the extracted font metric values.
When the user clicks the "Preview" button, the URL changes to https://line-height-picker.vercel.app/preview (with React Router and React Transition Group as before).

Step 4

The new page renders sample paragraphs with the font rendering information (step 1) and the CSS values (steps 2 and 3).
The user can revise any of the three inputs (the font name, the x-height, the x-height to line-height ratio), and the change will immediately be reflected in the rendering of sample paragraphs.
When the user clicks the "CSS code" button, the URL changes to https://line-height-picker.vercel.app/css (with React Router and React Transition Group as before).

Step 5

The new page displays the CSS code to replicate the rendering of sample paragraphs.
When the user clicks the "Copy CSS code" button, the app copies the CSS code into the user's clipboard with Clipboard API.
When the user clicks the "Back" button, the URL changes back to https://line-height-picker.vercel.app/preview (with React Router and React Transition Group as before).

After page reloads

The app uses store.js to keep the user input values even if the user (possibly by mistake) reloads the page.
When the browser tab is closed, the user input values will be deleted (due to the use of sessionStorage rather than localStorage).

Styling

The app uses Styled Components to style HTML elements.
It allows the whole page layout to be derived from just two values: x-height (8.5714px for mobile screens; 10px for desktop screens) and modular scale (1.5).

Known issues

Does not work with font files purchased from font foundries.
Sample paragraphs will be rendered in Times New Roman after page reloads.
Page transition animation is not intuitive when the user clicks the browser's back/forward buttons.

Contributing

Pull requests are welcome.

Setting up local environment

Requirements: Node.js (and NPM which comes with it).

To install:

$ git clone https://github.com/masakudamatsu/line-height-picker.git
$ cd line-height-picker
$ npm install

To start server:

$ npm start

Testing

The following testing tools are used:

To run e2e tests with Cypress and cypress-image-snapshot:

$ npx cypress run

To run component tests with Testing-Library and Jest:

$ npm test

Contact

Line-height Picker is developed by Masa Kudamatsu. You can find me on Twitter (@masa_kudamatsu). Alternatively, email me at masakudamatsu[at]gmail.com

masakudamatsu / line-height-picker

readme