Fonts

ButterKit gives you full control over typography in your App Store screenshots. It ships with a curated set of built-in fonts, supports any font installed on your Mac, and makes it easy to add new ones.

Built-in fonts

ButterKit includes a selection of fonts ready to use out of the box, so you can start designing immediately without installing anything.

System fonts

These fonts ship with macOS and are available in every ButterKit project:

Bundled Google Fonts

ButterKit also bundles several popular Google Fonts so they work even if you haven’t installed them separately:

Using custom fonts

Beyond the built-in options, ButterKit can use any font installed on your Mac. Simply install a font and it will appear in the font picker under Browse All Fonts….

Installing fonts with Font Book

macOS includes Font Book, a built-in app for managing fonts:

1. Download a font file (.ttf or .otf format).
2. Double-click the file. Font Book opens a preview.
3. Click Install Font. The font is now available system-wide.

You can also drag font files directly into the Font Book window, or place them in ~/Library/Fonts/ manually. Once installed, restart ButterKit if it was already running, and the new font will appear in the font picker.

To remove a font, open Font Book, select the font, and press Delete.

Where to find free fonts

• Google Fonts is the largest free and open-source font library, with over 1,700 families.
• Font Squirrel curates high-quality free fonts licensed for commercial use.
• The League of Moveable Type offers a small collection of carefully crafted open-source fonts.
• dafont.com hosts a huge variety of decorative and display fonts (check individual licenses before commercial use).

Font basics

A few typographic concepts worth knowing when designing your screenshots.

Serif vs. sans-serif

• Serif fonts (like Georgia, Fraunces, Vollkorn) have small strokes at the ends of letterforms. They often feel traditional, elegant, or editorial.
• Sans-serif fonts (like SF Pro, Inter, Jost) lack those strokes. They tend to feel modern, clean, and highly readable at small sizes.

Monospaced fonts

In a monospaced font (like Menlo or Source Code Pro), every character occupies the same width. These are ideal for displaying code, technical data, or anything that benefits from precise horizontal alignment.

Font weight and style

Most font families include multiple weights (thin, regular, medium, bold, black) and styles (roman, italic). Combining different weights within a single family is an effective way to create visual hierarchy without introducing a second font.

Ligatures

Ligatures are special characters where two or more letters are combined into a single glyph. For example, in many fonts the letters “fi” and “fl” merge to improve spacing and aesthetics. Some fonts include decorative or contextual ligatures that can add personality to your designs. Whether ligatures are used depends on the font itself and the rendering environment.

Tips for choosing fonts

• Limit yourself to 1 or 2 font families per design for a cohesive look.
• Pair a serif with a sans-serif for contrast (e.g., Fraunces for headlines with Inter for body text).
• Use weight to create hierarchy instead of adding more fonts.
• Test at actual size. A font that looks great in a design tool may be hard to read at the smaller sizes App Store screenshots are often viewed at.