TypeCraft

a browser based tool for designing scaleable typography.

---

No more flying blind!

TypeCraft allows you to easily test your typography in the browser. Meaning you can see the scaling and rendering of your type using the technology that will ultimately implement it. This is for reals!

How it works

Many browser based tools allow you to render typographic scales. But none can dynamically change the scale based on the breakpoint — which you can edit btw, TypeCraft does. Then prints the pixel values for you. Your welcome.

Features

• Everything is live — Make a change, shrink/extend the browser window you will see the change immediately.
• Create custom typographic scales — Stick to the classics (overview below) or make your own what you type is what you see.
• Change your base — Choose your base number for each scale.
• Create custom breakpoints — edit up to 4 breakpoints (5 regions) and see your decisions take effect.
• Set limits — Ensure your type never drops below a certain sizes
• Get hard values — solid pixel values for all decisions you make. You can leave the scales in the tool!
• Completely customizable — Change the font, create mockups, test anything you like as long as your type carries the classes the system will work.

Getting started

Launching

Download the latest version

• Unzip the file and drag 'index.html' on to your browser: chrome, firefox, or safari.
• Play — change the values, set breakpoints, stretch/shrink the browser to see your changes take effect.

How do I change the font?

For a google font:

For a desktop font:

Step 1 — Convert
As desktop fonts don't play particularly nice in the browser we need to convert the font to a webfont.

For a .ttf font go here
For a .otf font go here

• Drag and drop the font onto the input.
• Click the "EULAs of this font allow conversion" — because of course they do.
• Click convert, your font will now download as an impossibly named .zip file. Unzip the file and your shiny new webfont will be inside.

Step 2 — Install

• Drag your webfont into the folder 'fonts' — typecraft/fonts.
• Open the text editor (IDE) of your choice. If you don't have one download Atom here
• Open the 'index.html' file in your text editor. On the right hand side you will see a list of files. Double click 'style.css'.

Step 3 — Configure

In 'style.css' you will see some boilerplate code for the @font-face rule (no need to understand what this is).

• Replace "typeface bold" with a name for your font this will be its reference in code. For example for Helvetica Bold, "Helvetica Bold" is a good name. Note you need to do this for each font-weight you want to use.

Next we will change the path so that the browser can find your font.

• The path name 'fonts/typeface-bold.woff2' already directs to the folder 'fonts' so you only need to change the file name to the file name of your font. For example: 'fonts/my-font.woff2'

Your font is now loaded. Now our font is loaded we need to apply our font to our class/classes (classes are labels to which instructions can be added — the TypeCraft class list is below).


• Below 'Header Styling' change the font-family: declaration from "Open Sans" to your font name (they name you gave the font earlier) your font will now render. Nice One.
• Repeat for 'Body Styling'.

Key information

Class List

• hero = .hero
• h1 = .h1
• h2 = .h2
• h3 = .h3
• h4 = .h4
• body-big = .body-big
• body = .body
• body-small = .body-small
• body-x-small = .body-x-small

Classic scales

• 1.067 — Major Second
• 1.125 — Major Second
• 1.200 — Minor Third
• 1.250 — Major Third
• 1.333 — Perfect Fourth
• 1.414 — Augmented Fourth
• 1.500 — Perfect Fifth
• 1.618 — Golden Ratio