Fonts: settings and best results

01Step 1: Open Fonts and add your fonts

Click Tools in the sidebar, open the Create tab and click Fonts in the From scratch section. You can also type "fonts" in the search box at the top.

123456

1. 1Add fonts
2. 2Tabs by source
3. 3Search fonts
4. 4Sample text
5. 5Variable only
6. 6List or Grid

The fonts already on your computer are listed for you. To add your own, click Add fonts at the top right and pick Choose files… or Choose a folder…, or drop font files, a folder or a zip anywhere on the page. While your library is empty, the All and My fonts tabs also show both choices at the top of the list. Font files you drop on the Tools screen go to Fonts too.

Fonts reads TTF, OTF, TTC, OTC, WOFF and WOFF2 files, and any zip you choose or drop, including the zip you get from the Google Fonts website. Hangar copies each font into its own library, so moving or deleting the original later does no harm.

A banner says what happened: how many styles were added, how many files were already in your library, which could not be read and why, and how many other files were ignored. It names the first four files that could not be read, then counts the rest. To end an import early, click Stop. Anything already added stays. New fonts are marked New and come in selected, ready to compare.

12

1. 1What the import did
2. 2New fonts

02Step 2: Browse and search

Five tabs sort your fonts by where they come from:

• All: every font on this computer. Google’s full list stays on its own tab, so a search here only finds what you have.
• My fonts: the fonts you added to Hangar.
• Google Fonts: the optional free font list. See Google Fonts.
• Installed: the fonts installed on your computer. Hangar reads them the first time you open Fonts.
• Hangar: the fonts that come with Hangar.

Each row shows a short sample in the font. A font made for another script, such as Amharic, Arabic, Thai or Khmer, shows its sample in that script, so the row only shows letters the font really has. A font of icons or symbols shows a few of its own characters.

Above the list, type in the sample text box to see every family in your own words. Search fonts filters by name. The category menu narrows the list to Serif, Sans serif, Monospace, Display or Handwriting, and Variable only keeps fonts with adjustable axes, such as weight or width. Set the preview size to 24, 36, 48 or 72, and switch between a List and a Grid.

Click a family’s name or double-click its row to inspect it. Click anywhere else on the row to select it, or tick the box that appears when you hover over it. A bar appears at the bottom with Compare, Convert and Specimen PDF. The ⋯ button on a row or card has Inspect, Add to compare, Convert… and Export specimen PDF…. Installed fonts and your own fonts also have Show in Finder (Show in Explorer on Windows). For your own fonts, that opens Hangar’s copy, not your original. Your own fonts also have Remove from library.

12

1. 1Selected families
2. 2Compare and Convert

If a search finds nothing on this computer, Fonts tells you how many Google families match and offers to show them. If Google Fonts is off, the button reads Turn on Google Fonts, and clicking it turns the tab on. That count comes from a list inside the app, so it does not go online.

Fonts remembers the Browse and Compare views for each workspace. Your search and anything open in Inspect start fresh.

03Step 3: Compare fonts side by side

Select 2 to 6 families and click Compare, or use Add to compare on one family at a time. Pick a layout at the top right:

• Grid: one card per family. Type in any card to change the text in all of them.
• Lines: one line per family, for judging the same words stacked up. Type in any line to change them all.
• Pairing: a heading font over a body font on a sample article page. Choose each font from its menu, or use the swap button to trade them. Add pairing sets another pair beside it, and each extra pairing has its own remove button. Pairing opens on a light page, like a printed article.

In Grid and Lines, the text buttons give you a Headline, a Paragraph, a Pangram (a sentence that uses every letter) or Glyphs. Size, Line and Spacing apply to every font at once. In Pairing they change the heading only, and the body stays at a fixed size. The sun and moon buttons set a light or dark page.

Every family has its own style menu. In Grid, each card also has any axis sliders a variable font has, and buttons for features the font offers, such as Ligatures. Pairing uses each family’s style and features, but not its moved sliders. In Grid and Lines, × removes a family, and Add font searches My fonts, Installed and Hangar, plus any Google family you have opened. It stops at six families, so remove one to make room. Click a family’s name to inspect it.

12345

1. 1Add font
2. 2Text buttons
3. 3Layout
4. 4Axis sliders for this family
5. 5Features for this family

123

1. 1Add pairing
2. 2Heading font
3. 3Body font

04Step 4: Inspect one family

Click a family’s name to open it. If you came from Browse, previous and next buttons at the top right walk through that list, or press ⌘[ and ⌘] (Ctrl+[ and Ctrl+] on Windows). Press Esc to go back. Four tabs show the font in different ways:

12345

1. 1The four tabs
2. 2Metrics
3. 3Style and sizes
4. 4Axes
5. 5Copy CSS

• Type tester: click the text and type your own, or start from Pangram, Paragraph, Headline, Alphabet or Figures. It opens on Pangram. Headline shows the font at the lengths a heading comes in, in four rows you can edit: One word, A title, A long title and In capitals. If you typed your own sample text on the Browse screen, the first family you open starts on Headline with your words in the A title row. Shuffle swaps in another sentence that uses every letter on Pangram, and all four rows on Headline. Turn on Metrics to draw the baseline, x-height, cap height, ascender and descender over the first line.
• Waterfall: the first paragraph of your text, or the A title row on Headline, at ten sizes, from 12 to 96 px, so you can see where it stops reading well.
• Styles: every style of the family in your text, or in the A title row on Headline. Click one to make it the current style.
• Glyphs: every character the font draws, in groups such as Basic Latin. Search by name or type a character, and filter by Letters, Numbers, Punctuation or Symbols. Glyphs that draw nothing, such as spaces, stay hidden until you search for one. Click a glyph to see it large in the panel on the right, with its name, code, width, the styles that have it and any alternates. Copy character puts it on your clipboard.

1234

1. 1Search glyphs
2. 2Filter by kind
3. 3The glyph you clicked
4. 4Copy character

On the other three tabs, the panel on the right has two views. Adjust sets the Style, Size, Line height and Letter spacing, plus a variable font’s Axes and the font’s optional Features. Each feature shows a before and after, drawn by the font itself, and hovering over it marks the letters it changes in the Type tester. Reset puts the axes back. Optical size has an Auto button that makes it follow the text size, and you can type an exact value beside any slider. The Type tester uses every setting. Waterfall keeps its own sizes, and Styles keeps its own line height. Glyphs uses the same style, axes and features, and has its own style menu in the panel beside the grid. Copy CSS at the bottom copies them for a web page.

About shows the font’s license, with common licenses named in plain words and Show full licence for the whole text, and what the font says about embedding. Below that are its format, axes, version and file. Languages lists the writing systems it covers, such as Latin, Cyrillic or Arabic, and says if Latin Extended, Vietnamese, Greek or Cyrillic is missing.

123

1. 1License in plain words
2. 2What the font says about embedding
3. 3Languages

At the top, Add to compare carries your chosen style, axes and features into Compare, and Convert… opens the Convert panel for this family.

05Step 5: Convert fonts

Select families and click Convert, or pick Convert… from a row’s ⋯ menu or from Inspect. A panel slides in. Under Convert to, choose a format:

• WOFF2 (the default): the smallest file for websites. Letter shapes, spacing and features stay exactly the same.
• WOFF: for old browsers. It is larger than WOFF2, and letter shapes, spacing and features stay exactly the same.
• TTF: a desktop font. A TTF stays exactly as it is. An OTF is redrawn as a very close copy, without its hinting.
• OTF: a desktop font. An OTF stays exactly as it is. A TTF is redrawn as a very close copy, without its hinting.

A web font that already holds the right kind of letters is unpacked exactly, not redrawn. A TTF or OTF already in the format you chose is saved as it is. A WOFF or WOFF2 is packed again, with the same letter shapes, spacing and features.

For WOFF2 and WOFF, leave Web kit on to also write fonts.css, with one rule for each style, ready to paste into a site. A variable font gets one rule that covers its range of weights. If a family has a variable font and static copies of it, only the variable font is written, so the CSS stays short.

Files lists what will be written: one file per style, or one file for a variable font. Fonts calls each one a face, so the button reads, for example, Convert 5 faces. A row that cannot be converted says why.

12345

1. 1Convert to
2. 2Web kit
3. 3Files to write
4. 4Save to
5. 5Convert

If a font says it may not be converted without the foundry’s permission, Convert shows that message with an I have permission box, and that family waits until you tick it. Other fonts with a limited license get a short reminder to check the license before you use them on a website.

1

1. 1I have permission

Pick a folder under Save to. It starts on the last folder you used. The first time, it starts on a fonts folder inside your workspace’s output folder, which Hangar creates when it saves, or asks you to choose if the workspace has no output folder. Everything goes in one folder, so fonts.css can find the files. If a name is already taken, the new file gets a number, such as Inter-Bold (2).woff2.

Click the Convert button at the bottom. Stop lets the current file finish and keeps everything already written. When it is done, the panel lists each file with its size and how much it changed, shows the fonts.css, and names anything that was skipped or failed, with the reason. One failed file does not stop the rest. Use Show in Finder (Show in Explorer on Windows) or Copy CSS, then Done.

12

1. 1fonts.css
2. 2Copy CSS

A static font is named after its PostScript name, such as Inter-Bold.woff2. A variable font uses its family name and axes, such as Inter[opsz,wght].woff2. Each font in a TTC or OTC collection becomes its own file.

06Step 6: Save a specimen PDF

A specimen is a PDF that shows a font family at its best, to send to a client or print for a meeting. Select one or more families and click Specimen PDF in the bar at the bottom. You can also choose Export specimen PDF… from a row’s ⋯ menu, or click Specimen PDF… in Inspect.

A panel opens with your choices:

• Fonts: each family you picked, written in its own font. Every family gets its own PDF.
• Template: Proof, Poster or Book. The pictures are the real first pages of your fonts. Every template has the same six pages: a cover, the styles, sizes, a page of text, the characters, and the features and languages. A font with many characters gets more character pages.
• Paper: A4 or Letter. Fonts picks the paper used where you live, and remembers your last template and paper.
• Files: each PDF it will save, with its name and page count, such as "Newsreader specimen.pdf · 6 pages".

Click Export PDF (Export 3 PDFs for three families) and choose where to save. For one family you can also change the file name. Several PDFs are saved in the folder you choose, each named after its family. A file with the same name is never replaced: the new one gets a number, such as "Newsreader specimen (2).pdf".

While it works, the panel says which family it is setting. Click Stop to end early; the PDFs already saved stay. When it is done, the panel shows the first page of each PDF with Open, the folder, and Show in Finder (Show in Explorer on Windows). Click Done to close it.