Sketch 59 — New Typography Features & Smart Layout Improvements

Thalion
Thalion
Oct 15 · 5 min read

Sketch 58 was a game-changer to our workflow, in the next update Sketch Team has prepared nice improvements to the famous Smart Layout and some new Typography features.

Before, you will dive into the mentioned new features (I will also show you how to use them in practice), let’s see what’s new or improved in Sketch 59:

  • More OpenType features — You can find lots of new features related to OpenType in the Text menu. Just select the font and open Text -> OpenType Features in the Menu Bar.
  • Variable fonts support — Now, you are able to manipulate variable font options like weight, width, optical size, slant, and more. New options are available in the popover in the Inspector panel.
  • Smart Distribute enhancements — improved behavior of handles. They will not adjust spacing until you start dragging them. The handles also do not show if the selection is too small (now they do not interfere with surrounding).
  • Smart Layout improvements — New Template to learn Smart Layout included! Sketch Team also removed the behavior that occurs when there was a small layer placed less than 20px from a text layer
  • Updated typeface picker — enhanced, cleaner appearance and behavior of the popover.
  • New API for developers — it gives more power to plugins when it comes to document changes.

Smart Layout Improvements

This insanely great feature introduced with the previous version of Sketch changes design workflow. There are several tutorials and articles with samples to download and see the feature in action. However, lots of designers would like to see official materials prepared by Sketch Team to learn Smart Layout.

Finally, in version 59, you can open an official Template to learn how to use Smart Layout in multiple cases.

Learn Smart Layout with Official Tutorial!

Official Smart Layout Template is very useful — it guides you from the simplest setup of the feature, into more complex Symbols. Finally, you can try to manipulate the layout of the entire Pages that include Symbols and Groups with various layout setup.

Tutorial includes lots of practical tips for Smart Layout

If you would like to master Smart Layout, you should definitely spend a few minutes playing with the file.

More Typography Features in Sketch 59

If you would like to use the full potential of fonts, this version of Sketch brings lots of stuff that will let you unleash it.

The first of the new features is better OpenType support.
Now in the “Text” menu, there are submenu “Open Type features.”

Text -> OpenType Features

The number of features you can see depends on the font you selected. If you choose “San Francisco,” you will see the following:

  • Ligatures
  • Number Spacing
  • Vertical Position
  • Contextual Fractional Forms
  • Text Spacing
  • Case-Sensitive Layout
  • Alternative Stylistic Sets
  • Contextual Alternates
  • Lower Case
  • Upper Case

If you would like to see what is the full OpenType features list you may want to read this summary:

OpenType Features

It is clear that with version 59 has become a powerful tool for even advanced typography designs. This is great because more and more designs pay attention to those details.

Variable fonts are quite a new thing in digital typography. They were introduced in 2016, and this new OpenType standard allows a single font file to store a continuous range of design variants.

Well, flexibility! Now you are not limited to these few files “light, regular, bold, extra-bold,” but if you use the variable font, you can change the weight (and other properties) smoothly!

If you have the variable font used in your project, Sketch will simply display new features in the inspector panel of the selected layer with Text.

The new feature is very natural and easy to discover if you play around with typography.

If you would like to learn more about variable fonts, feel free to discover the following materials:

To conclude

Sketch 59 includes noticeable improvements. I love to play with new variable fonts support that gives a lot of flexibility. What do you think of an update? Did you found Smart Layout Template useful? I definitely love it.

By the way…

If you plan to start a new project soon or to organize your UI Library — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. It helps you design UI with the best Sketch techniques — Smart Layout, Symbol Overrides and more. See Prime in action.

To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.

You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.


If you would like to read more stories like this feel free to follow me on one of more social media platforms:

Thanks for reading!

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Thalion

Written by

Thalion

Przemysław Baraniak, Author of UXMisfit.com | UX/UI Designer

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade