Text and typography

Studio text layers support 60 built-in fonts, your computer's installed fonts, per-range styling, curated font pairings, gradient fills and stackable text effects. This page covers all of it, including which styles survive export.

Adding text

1. Click Add Text in the floating toolbar (or Add text on the collapsed left panel rail).
2. Click on a page to drop an auto-sized text box centered on that point, or drag to draw a fixed-width box.
3. Start typing.

New text reads "New text" in Akasha Bold, centered, with a size scaled to the page (never smaller than 24 pixels). The color is picked automatically, dark on light pages and white on dark ones, so you can always see it.

A box you drag out starts left-aligned with Auto height off. A box you click to place grows with its content.

Editing text

• Click a text layer to select it, then click it again to start typing. A blue outline shows you are in edit mode.
• Enter adds a new line.
• Esc finishes editing. Clicking elsewhere does the same.
• If you finish with the box empty, the layer is removed.

Position and size

When Auto height is off, any text that runs past the bottom of the box is cropped in the export.

Typography controls

Fonts

The font list is grouped so you can scan it quickly.

Above the built-in groups, the list can also include:

• Bitgrain fonts, extra families hosted by Bitgrain, with their full set of weights.
• System fonts, the fonts installed on your computer, once you turn them on.
• Uploaded, fonts you uploaded yourself or that arrived inside a .btg project file.

Using your own fonts

There are three ways to use a font that is not in the list.

1. Upload a font. Click Upload a font under the font controls and pick a TTF, OTF, WOFF or WOFF2 file. It is applied to the selected text straight away and appears under Uploaded. Uploaded fonts are kept in this browser, and they are embedded in every .btg file you save, so the project looks the same on another computer. Very large font files may not fit in browser storage, in which case you see a message and the font is not added.
2. System fonts. Click Use system fonts under the font controls. Your browser asks for permission, then every font installed on your computer appears in the System fonts group. This needs Chrome or Edge on desktop. Other browsers show a message that local font access is not supported.
3. Fonts inside a .btg file. When you open a .btg project that has custom fonts embedded in it, those fonts are installed into Studio in your browser and appear under Uploaded. They stay available for your other projects in the same browser, and they are embedded again whenever you save a .btg file.

Note: System fonts are read from your computer each time and are not embedded in .btg files. If you send a project that uses a system font to someone who does not have that font installed, their copy falls back to another typeface. Export an image or PDF when the exact look matters.

Font pairings

Open Font pairings (curated heading and body fonts) at the bottom of the Typography section. Each pairing has a Heading and a Body button that apply its font to the selected text.

Use the heading font on your title layer and the body font on everything else for a combination that is known to work.

For reusable text styles across a whole project, set up a design kit.

Styling part of a text

You can style individual words or letters differently inside one text layer.

1. Click into the text to edit it.
2. Select the words you want to change.
3. Change the Font, Weight, Size, Italic or Fill color in the right panel.

Only the selected characters change. When the selection covers several different values, the control shows Mixed.

When you are not editing, the same controls change the whole layer at once, and they clear any per-range values for that property. For example, picking a new font for the whole layer replaces every per-word font inside it.

Mixed colors

When a text layer contains several colors, the Fill section shows Mixed colors and lists one color picker per color used. Changing one of them recolors only the characters in that color. Unify color sets the whole text to a single color.

What survives export

Per-range styling covers five properties: color, font, weight, italic and size. These are exactly what the exporter reads, so they come out the same in PNG, JPG, WebP, HDR and PDF exports.

Anything else that ends up styled inside the text, such as underline, strikethrough or a highlight carried over when you paste text from a web page or document, may show on the canvas but is silently dropped when you export. Line height, letter spacing, alignment, case, gradient fill and text effects always apply to the whole layer. With a gradient fill on, the gradient covers every character, so per-range colors are hidden until you turn it off.

Tip: Paste text as plain text (Cmd + Shift + V on Mac, Ctrl + Shift + V on Windows) to avoid bringing in formatting that will not export.

Fill and gradient text

The Fill section sets the text color. It can be bound to a design kit color.

Turn on Gradient to fill the text with a two-color linear gradient instead.

A preview bar under the settings shows the gradient. The gradient spans the whole text box, so resizing the box changes where the colors fall.

Appearance

The Appearance section has opacity and a blend mode. Multiply is handy for text that should look printed onto a textured background.

Text effects

Click the plus in the Effects section to add an effect. You can stack several, in any combination, and each one has a remove button.

• Shadow is a classic drop shadow.
• Outline traces the letters with a stroke.
• Lift adds a soft shadow straight below the text, so it looks raised off the page.
• Glitch splits the text into two offset color copies, like a misregistered print or an RGB split.

Effects, gradient fills and case settings export exactly as they look on the canvas, including on text with per-range styling. Stacked effects are drawn together, and the lift distance and opacity you set carry through to the file.

Related

• Layers
• Design kits
• Color tools
• Exporting from Studio
• Supported files

More documentation

• All documentation
• More in studio
• Open the editor
• Open the studio
• Read the blog