Typesettings Sketch Plugin
Create typesettings once and use them anywhere. Set character spacing and line height of text layers based on the
font size, and
letter casing. Better yet, let the plugin do it for you automatically when you allow it to from the plugin preferences.
Below you'll find typsettings that are already included with the plugin.
Get the TypesettingsStarter.sketch file to get going easily.
Set Character Spacing
cmd + shift + right arrow
Sets the character spacing of any selected text layer based on the font and text size. You can
enable automatic character spacing in the plugin preferences.
Set Line Height
cmd + shift + down arrow
Sets the line height of any selected text layer based on the font and text size. You can
enable automatic line height in the plugin preferences.
ctrl + alt + cmd + return
To register typesettings, you'll want to do the following:
- Create your text layers using any size, weight, and letter casing permutation
- Set the character spacing and line height for each
- Select all text layers
- Go to
You can create typesettings for uppercase, lowercase (if that's a thing?), and no casing.
In order to properly save the typesettings for a given letter casing, you'll need to make sure that the text layers has the desired
Text Transform option when registering the typesettings.
- Create two text layers using the same font family, font size, and weight
- Select one of the text layers and set the
Text Transformoption to
Uppercaseusing the Text Inspector
- Set the character spacing and line height of each text layer to whatever you want
- Select both layers and Register them
ctrl + alt + cmd + t
When registering your typesettings, the
<font_family_name>.json file will save to your
Desktop by default. You can change the directory (for instance, to a shared folder) from the plugin preferences.
Enable Automatic Character Spacing: Automatically sets character spacing—if the typesetting is registered —when deselecting text layers. This is turned off by default.
Enable Automatic Line Height: Automatically sets line height—if the typesetting is registered —when deselecting text layers. This is turned off by default.
Ignoring Text Layers
automatic character spacing and/or
automatic line height are enabled, you can ignoring any text layer by adding the prefix
^ or the suffix
^ to text layer name. Note that if you manually typeset the text layers they will not be ignored.
You can change both the prefix and suffix in the plugin preferences.
The following typefaces have been registered and automatically included with the plugin. If you'd like to add more, put the typesettings in the
directory folder and open a pull request.
- SF Pro Display from iOS resource guidelines
- SF Pro Text from iOS resource guidelines
- SF Compact from watchOS resource guidelines
This plugin was created using
skpm. For a detailed explanation on how things work, checkout the skpm Readme.