Text & Typography

Text

To insert text you have to activate the text tool by first clicking on the icon at the toolbar or pressing T. Then you have two ways to create a text layer:

1. Click to create a textbox without any specific dimensions.
2. Drag to create a textbox with a fixed size.

Tips for resizing

• Double-click on the right side of the bounding box to set the resize setting to auto-width.
• Double-click on the bottom side of the bounding box to set the resize setting to auto-height.

Edit and style text content

Press Enter with a text layer selected to start editing the text content. You can style parts of the text content as rich text.

Text options

1. Font family. Penpot includes by default the Google Fonts cataloge. You can also install your own fonts.
2. Font size.
3. Font type.
4. Line height (in pixels).
5. Letter spacing (in pixels).
6. Text case: none, uppercase, lowercase, titlecase.
7. Horizontal alignment: left, center, right, justify.
8. Sizing: auto height, auto width, fixed size.
9. Vertical alignment: top, center, bottom.
10. Decoration: none, underline, strikethrough.
11. Direction: LTR (left to right), RTL (right to left).

RTL support

Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.

If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.

Custom fonts

If you have purchased, personal or libre fonts that are not included in the catalog provided by Penpot, you can upload them from your computer and use them across the files of a team.

Upload local fonts

To use a font that you have on your local machine, first you need to upload it to the Penpot team where you want to use it.

You can find the “Fonts” section in the dashboard menu, at the left sidebar.

To upload a local font:

1. Press “Add custom font”.
2. Inspect your local files to select one or more fonts that you want to upload. You can upload fonts with the following formats: TTF, OTF and WOFF. Only one format will be needed.
3. Change the font name if needed. The font name is the name that will be shown in the font list at the workspace. It is also what Penpot uses to group fonts in families. You can always edit it later.
4. Once ready, press upload. That's it. The font will be available at the font list of this team’s files.

Group fonts in font families

Fonts with the same font family name will be grouped as a single font family. That means that at the font list that you will use at the files they will be shown as only one font with different variants available.

If you want to add a font variant (eg: Light) to a font family (eg: Helvetica) you only need to ensure during the upload process that it has the same font family name.

Edit custom fonts

At the right side of a font family of the custom fonts list you can find a menu that allows you to edit the name of a font family and delete it.

Using custom fonts

Custom fonts are added to the fonts catalog of a team and can be used at the workspace from the font list at the design sidebar.

Fonts Licensing and Usage

You should only upload fonts you own or have license to use in Penpot. Find out more in the Content rights section of Penpot's Terms of Service. You also might want to read about font licensing.