LogRocket Blog

Typographic scaling: Definition, Figma tutorial, and examples

thumbnail
  • Definition of typographic scaling: Typographic scaling is the process of establishing a harmonious relationship between font sizes in a design by consistently multiplying the base font size by a fixed ratio.

  • Types of typography scales: Typographic scales can be categorized based on the ratio used to define them. Some common type scale ratios include minor second, major second, minor third, major third, perfect fourth, augmented fourth, perfect fifth, and the Golden Ratio.

  • High contrast scales: High contrast typographic scales can be achieved by using ratios such as augmented fourth, perfect fifth, and the Golden Ratio. These ratios create a noticeable contrast between font sizes for a more dynamic design.

  • Type scale calculator: Tools like Typescale can be used to quickly generate a typographic scale. By inputting a base font size, the tool calculates the font sizes for different headings and body copy based on a chosen ratio.

  • Figma tutorial: A quick tutorial in Figma on creating a typographic scale involves setting a base font size, calculating the font sizes for headings and body copy using the desired ratio, and applying the scale to different text elements in the design.

  • Creating a harmonious system: By following the principles of typographic scaling, designers can establish a balanced and visually pleasing relationship between font sizes in their designs. This helps create a cohesive and professional look for the overall design.