A Typeface Transformation: Elevating Brands With Flutter

More Design Power in Flutter Text Themes

The Flutter SDK sets up the bare minimum in typography. In fact, with most target platforms the Flutter SDK defaults to one system font for text themes instead of design contrasts of different fonts for the non-body and body test. In fact, the only platform in which two system fonts are used by default is the Apple iOS platform.

Branding wise we do specific things in UX to assist in branding the app such as element animation and of course typography. And in that typography is the design choices of which fonts to pair. And how we do that is different than that Serif for headers and sans for body rule that we had in the pre-digital print era. Yes, its an old rule that is no longer valid with modern font typefaces; most will not even tell you its a rule that is no longer used.

And that is not the only design problem to solve. For example, for any custom font in the assets folder; you will see a font flash as the fonts are not pre-cached when the app first starts on the device.

Then one of the other Flutter internals aspect is that the Text Themes are part of the ThemeData which in fact is a special view-model in flutter. Special in that we need to do some specific things to make it easier to implement the Text Themes as we have to call other methods from different components of the ThemeData class.