Running Time: 1min 11s 

 

This video demonstrates how to create a text style that is responsive to it's container size. This means that the text will automatically resize depending on the size of the cell it is within. This is very useful for ensuring that large headings don't look ugly on mobile screen sizes. For help on what settings to choose, see the text below this video. NB Click on  in the bottom right of the video to view fullscreen.

About this video

This video assumes you are already logged into the Sketchanet editor and have a page open for editing. To learn how to do this see here.

 

Responsive text helps ensure your typography is a suitable size on all devices and at all screen sizes.

 

To apply responsive text, enable Variable Font Size in the Text Styles Editor.  The default settings are usually suitable for most applications, but can be further tweaked to fine tune the size of your text at various screen widths.

 

What settings to choose

 

The way variable sized text is set up in Sketchanet, you can define the range of the size of the container over which the text should scale. So, if you set the "Scaling range min width" to 300px and the "Scaling range max width" to 900px, then when the cell containing the text is less than 300px wide, the text will be the "Min font size" value, and when the cell containing the text is more than 900px wide, the text will be the "Max font size" value. Between the two the text size will scale proportionally. 

 

Most mobile phones have a screen width of around 360px or more, so using a  "Scaling range min width" of around 300px is usually a good option. The  "Scaling range max width" value that best suits you is going to depend on how you have your page set up, but to cater for an iPad in Landscape mode you might chosoe a value of around 900px. Then on screens above that width, the text will remain a consistent size.

 

If in doubt, experiment with the settings - trial and error never hurts.

 

Important Tip

 

Due to the nature of how variable text size works, you need to save a text style before you can convert it into a variable text style. ie if you create a new text style, you won't initially be able to click the Variable Font Size checkbox until after you have saved that new style.