Typography in Sketch
12 Days of Sketch | Day 4
As an InDesign lover at heart, I have been happily surprised with how eloquently Sketch handles type. So I just wanted to share some handy features I have learned:
Text Styles
Working with a development team? Text styles are a great way to integrate the developer mentality into your designs. Everytime there is a unique font size or font weight, the development team has to create a new style. So optimizing these styles in your designs is key. Are you using a 17pt font for body copy? Why not just use the standard 16pt iOS or Android body style? Is your header bold on one screen but regular weight on the other? Perhaps you should choose one or the other to create consistency. The team here at Atomic Robot generally starts out using the standard iOS and Android text styles, and only creates custom styles when necessary.
Text styles also allow you to update text efficiently. Instead of updating all instances of 16pt SF Regular, just update the text style and watch it automatically populate through all of them. I would recommend creating a Sketch Library file with the included text styles to have a clean, single source of truth. This could also be of help to other designers and your development team to use as a style guide. Not familiar with Libraries? Check out a brief overview in Grace’s earlier article.
Layout Grids
A feature that was somewhat hidden to me, but extremely helpful is the layout grid built into Sketch. It can be found under View > Canvas > Layout Settings. This generates a subtle red grid to align all of your designs to. I like to set my grid to a base of 4pt or 8pt. That way it is easy to align the baseline of text, and it is also a familiar mobile unit. The grid can easily be hidden with “Control + L” on Mac, and can be customized to be specific to each artboard. This feature has saved me from the time consuming habit of holding down “option” and measuring the space between every asset. It also allows you to align text of different sizes, as the outer containers can sometimes get confusing.
Advanced Characters and Settings
Sketch offers a variety of type adjustments in the Text Inspector panel — size, color, capitalization settings, alignment, etc. However, where do you go when you need a number to be superscript? Or to implement a custom ligature? Those settings are a bit hidden. First, highlight the text that you want to edit. Then, go up to the View menu, and click on Show Fonts. This should bring up a dialogue box. In that box, click on the gear dropdown and select Typography. Here you have a variety of settings to fine tune your type: ligatures, number styles, small caps, etc. If you select the Character menu instead of Typography, you can access all of your special characters that the font supports.
Text on a Path
Having text follow a path is not too tricky. First, draw the shape or path that you would like the text to follow. This can be done with the pen or shape tools. Then create a text box with the desired copy. Select the text box, and go up to the Text menu. Select “Text on Path.” Now drag the text box towards the shape or path and it should snap into alignment. Adjust by moving the text box as needed. Nifty!
Summary
Sketch is continuing to build more and more features to create typographic efficiency — keep using them to your advantage. You (and the developers on your team) will thank you!
Do you have any other typography tips and tricks? Share them with us!
We’re posting Sketch tips and tricks every Monday, Wednesday, and Friday until the holidays, so stay tuned for more tips and tricks!
Learn more about Atomic Robot or follow us on Instagram Twitter Dribbble LinkedIn
