Contents

Flutter's fonts and typography

Contents

Typography covers the style and appearance of type or fonts: it specifies how heavy the font is, the slant of the font, the spacing between the letters, and other visual aspects of the text.

All fonts are not created the same. Fonts are a huge topic and beyond the scope of this site, however, this page discusses Flutter’s support for variable and static fonts.

Variable fonts

Variable fonts (also called OpenType fonts), allow you to control pre-defined aspects of text styling. Variable fonts support specific axes, such as width, weight, slant (to name a few). The user can select any value along the continuous axis when specifying the type.

<img src=/flutter_website/assets/images/docs/development/ui/typography/variable-font-axes.png class=”mw-100” alt=”Example of two variable font axes”>

However, the font must first define what axes are available, and that isn’t always easy to figure out. If you are using a Google Font, you can learn what axes are available using the type tester feature, described in the next section.

Using the Google Fonts type tester

The Google Fonts site offers both variable and static fonts. Use the type tester to learn more about its variable fonts.

  1. To investigate a variable Google font, go to the Google Fonts website. Note that in the upper right corner of each font card, it says either variable for a variable font, or x styles indicating how many styles a static font supports.
  2. To see all variable fonts, check the Show only variable fonts checkbox.
  3. Either scroll down (or use the search field) to find Roboto. This lists several Roboto variable fonts.
  4. Select Roboto Serif to open up its details page.
  5. On the details page, select the Type tester tab. For the Roboto Serif font, the Variable axes column looks like the following:

<img src=/flutter_website/assets/images/docs/development/ui/typography/roboto-serif-font-axes.png class=”mw-100” alt=”Listing of available font axes for Roboto Serif”>

In real time, move the slider on any of the axes to see how it affects the font. When programming a variable font, use the FontVariation class to modify the font’s design axes. The FontVariation class conforms to the OpenType font variables spec.

Static fonts

Google Fonts also contains static fonts. As with variable fonts, you need to know how the font is designed to know what options are available to you. Once again, the Google Fonts site can help.

Using the Google Fonts site

Use the font’s details page to learn more about its static fonts.

  1. To investigate a variable Google font, go to the Google Fonts website. Note that in the upper right corner of each font card, it says either variable for a variable font, or x styles indicating how many styles a static font supports.
  2. Make sure that Show only variable fonts is not checked and the search field is empty.
  3. Open the Font properties menu. Check the Number of styles checkbox, and move the slider to 10+.
  4. Select a font, such as Roboto to open up its details page.
  5. Roboto has 12 styles, and each style is previewed on its details page, along with the name of that variation.
  6. In real time, move the pixel slider to preview the font at different pixel sizes.
  7. Select the Type tester tab to see the supported styles for the font. In this case, there are 3 supported styles.
  8. Select the Glyph tab. This shows the glyphs that the font supports.

Use the following API to programmaticaly alter a static font (but remember that this only works if the font was designed to support the feature):

A FontFeature corresponds to an OpenType feature tag and can be thought of as a boolean flag to enable or disable a feature of a given font. The following example is for CSS, but illustrates the concept:

<img src=/flutter_website/assets/images/docs/development/ui/typography/feature-tag-example.png class=”mw-100” alt=”Example feature tags in CSS”>

Other resources

The following video shows you some of the capabilities of Flutter’s typography and combines it with the Material and Cupertino look and feel (depending on the platform the app runs on), animation, and custom fragment shaders:

Prototyping beautiful designs with Flutter

To read one engineer’s experience customizing variable fonts and animating them as they morph (and was the basis for the above video), check out Playful typography with Flutter, a free article on Medium. The associated example also uses a custom shader.