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.

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:

• Cypress
• cypress-image-snapshot
• Testing Library
• Jest
• ESLint
• Prettier

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

License