Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


What is the Type Scale app for Studio?

Follow

type-scale-studio-app-banner.png

The Type Scale app lets you select or generate modular type scales directly in Studio, so you can easily apply the scales to your Studio projects as needed.

A modular type scale is a sequence of type sizes that increase based on a consistent ratio.

Using scales when designing prototypes helps establish a clear information hierarchy and generate rhythm, consistency, and contrast—all of which help users better understand your content and visual cues.

Using Type Scale

Currently, you can do the following with Type Scale:

  • Select a pre-defined scale.
  • Define your own custom type scale ratio.
  • Preview the scale you've selected or created before applying it to the prototype.
  • Reference the artboard Type Scale produces when you click Create Style Sheet.

 

You can use these pre-defined scales, which are included with Type Scale based on accepted design best practices and popular platform scales:

  • Minor Second (1.067)
  • Major Second (1.125)
  • Minor Third (1.2)
  • Major Third (1.25)
  • Perfect Fourth (1.33)
  • Augmented Fourth (1.414)
  • Perfect Fifth (1.5)
  • Golden Ratio (1.618)
  • Material Design
  • iOS

Creating a style sheet

To create a style sheet with Type Scale:

  1. In your Studio App Store dock, click the Type Scale icon (invision-studio-app-type-scale-icon.png).
  2. In the Type Scale module, click the Font dropdown arrow and select the font you want to use.
  3. Click the Weight dropdown arrow and select your preferred font weight.
  4. In the Base Size field, enter your preferred base font size.
  5. Click the Scale dropdown arrow and select a pre-defined scale/ratio or select Custom Ratio to create your own.
  6. If wanted, in the Preview Text field, enter the text you want to use for the style sheet.
    If you don't see the Preview Text field, ensure that you have selected the Preview Type Scale checkbox.
  7. Click Create Style Sheet.
    To close the Type Scale module, in the upper-left corner, click the X.
    type-scale-studio-app-create-style-sheet.gif

After completing the steps above, you can access the Type Scale style sheet (artboard) on the canvas near your other artboards for the prototype.


Was this article helpful?

Still have a question?

Contact Us