Getting started

Installing the app

You can install Typeface in a few simple steps. First download the latest release of the app. Double click the downloaded dmg file to open it. Then drag the Typeface app icon to the Applications folder. Close the dmg window and you’re done!

typeface introduction

You can also get the app from the Mac App Store. Both versions are functionally the same, but keep in mind that the standalone license won’t be able register the MAS version or the other way around.

Once installed click the Typeface icon in your Applications folder (or Launchpad) to start the app.

First launch

The first time you launch the app you’ll see a welcome screen. Start the Quick Intro to learn about the basics of the app. If you’ve skipped the introduction or want to see it again, choose Help > Intro & What’s New from the main menu.

typeface introduction

When you’re done with the introduction close the welcome screen to reveal the main Typeface window. Typeface imported your fonts from Font Book (which includes system fonts and activated fonts) in the background. You can scroll through your library to view previews for all these fonts.

Your Font Book collections are imported as well, you can find them in the sidebar. These collections are only imported once on first launch to get you started. The collections are not synced, so you can modify, rename or remove them in Typeface, that won’t change the collections in Font Book.

The grid

The grid shows previews of your fonts. These previews allow you to assess the appearance of your fonts, so you can determine which one you want to use in your design.

typeface font grid

By default the app shows ‘Hamburgefonstiv’, which is a meaningless word that gives a nice representation of a font due to its variety of characters. This combination of Latin letters shows the most used forms and curves normally found in characters, so it’s particularly useful to see the overall font appearance at a glance. Of course you can change it to whatever you want: choose View > Preview… from the main menu to enter a custom preview text.

You can adjust preview size, tracking and other visual options using the actions in the toolbar and the View menu. Learn more about changing font previews in the appearance article.

Activating fonts

Typeface can preview any font you import, but to use the font in your design application you need to activate it first. You can click on the grey activation dot to activate a font. Activated fonts will show a blue dot. Learn more about font activation

activate a font

Selecting fonts

In Typeface you’re collecting fonts instead of selecting. When you collect a font it goes into the Quick Collection, a temporary workspace for interesting fonts. Click on the Quick Collect corner on the bottom right of a preview to add that font to the Quick Collection. Learn more about selection

select a font

Families

Typeface shows a separate preview for each font variant and weight. If you want to see a single preview for each font family instead, enable View > Grid > Group by Family. Once enabled a button at the top-right corner of a preview shows the number of family members. Click the button to view each individual weight and variant.

view font family

The toolbar

The toolbar provides access to some common actions.

typeface toolbar

The first button toggles the sidebar. When collapsed you can browse your font collection without any distraction. Alternatively you can swipe on your trackpad or mouse to quickly collapse or expand the sidebar. If the sidebar is collapsed and you drag fonts towards the left side of the grid the sidebar will automatically open so you can drop the fonts on a tag.

The second button toggles the Quick Collection. The Quick Collection shows your currently selected fonts. You can use it to temporarily mark interesting fonts for your design. Right next to the icon the number of currently selected fonts is displayed. Select a few fonts by clicking on the bottom-right corner of the previews. The fonts will be highlighted and the count next to the Quick Collection will change. Right click on the Quick Collection icon to get an option to clear it and deselect your selected fonts. Learn more about the Quick Collection

The third icon toggles the preview input field. It allows you to change the preview text.

You can adjust the font size using the slider. Hold down the Option key and interact with the slider to adjust tracking. Learn more about preview appearance

Finally the search field allows you to search for fonts. You can search for font names, foundries, tags, font properties and OpenType features.

The sidebar

The sidebar is divided into three sections. The top part shows application tags, such as All for all imported fonts and Activated for your activated fonts. Right click on the All tag to toggle the visibility of applications tags in the sidebar.

typeface sidebar

Below the application tags your imported locations will be visible. If this is the first time you launch Typeface there won’t be any locations yet. You can import a new location by clicking on the + button or drag a folder from Finder onto the app. Imported locations are links to folders on your Mac. Typeface scans those folders for new fonts and automatically imports new fonts on launch. Learn more about importing fonts

The bottom section contains your custom tags. You can use these to organize your fonts. Create new tags using the + button. Drag and drop fonts to a tag in the sidebar to attach that tag. Learn more about tags

Hold down the Option key and click on any tag in the sidebar to view the inverse of that tag. For example: Option click on Activated to view Deactivated fonts. Option click on User to view System fonts.

Font details

To view more info about a font click on its preview in the grid. You’ll get access to five different tabs: Characters, Text, Features, Variables and Info.

Characters

View all the unicode characters a font supports.

typeface sidebar

Text

Find out how a font looks in a book, magazine or website article. You can preview one of the full body text layout presets and create your own custom templates. Drag the text up and down or left and right to adjust font size and line height, respectively. Learn more about Body Text

typeface sidebar

Features

This tab allows you to inspect OpenType font features, such as ligatures, figure styles, character alternates, fractions, capitals and more. Typeface extracts the features that are included in a font and displays the individual glyphs that are visible if that feature is enabled. Hover over the name of a feature to get a live preview at the top of the window. And click on the name or bullet to enable the feature. Note that this is not persistent, if you close the detail view the features are reset. To persistently enable OpenType features use the Typography menu.

typeface sidebar

Variables

Variable fonts allow you to change certain features of a font, such as weight or slant. Not every font supports this, for examples see: v-fonts.com

Hover over the sliders to get a live preview at the top of the window. Click to keep the slider in the current position. Double click to reset a variable slider to its original value. You can right click on the displayed value to copy the CSS definition of that variable, or all variables.

typeface sidebar

Info

Access the meta-data of a font. Here you’ll find out about the font name, font type, designer, manufacturer and language support.

The bottom of this tab shows a list of tags currently attached.

typeface sidebar


< Article overview