Flutter default text themes, what flutter internally uses !!

Let’s start with the problem statement,

Problem Statement : In flutter you need to go very deep to get to know what is the default text themes in flutter.

In Flutter by default GoogleFonts.roboto font family is used and font size is used in logical pixel.

In flutter, all the default properties are listed below,

There are actually 2 defaults, among them one is the old one which we don’t use anymore,

One is as of 2018 [Material 2] specs given below

Source: https://m2.material.io/design/typography/the-type-system.html#type-scale

As from flutter documentation

The 2018 spec has thirteen text styles:

NAME         SIZE  WEIGHT  SPACING
headline1    96.0  light   -1.5
headline2    60.0  light   -0.5
headline3    48.0  regular  0.0
headline4    34.0  regular  0.25
headline5    24.0  regular  0.0
headline6    20.0  medium   0.15
subtitle1    16.0  regular  0.15
subtitle2    14.0  medium   0.1
body1        16.0  regular  0.5   (bodyText1)
body2        14.0  regular  0.25  (bodyText2)
button       14.0  medium   1.25
caption      12.0  regular  0.4
overline     10.0  regular  1.5

Source: https://api.flutter.dev/flutter/material/TextTheme-class.html

Other one is as of 2021 [Material 3] specs given below

Source: https://api.flutter.dev/flutter/material/TextTheme-class.html

Also, you can find the same in more detail format on the material 3 guideline page too. following is the reference

Typography - Material Design 3

Question : Now all we know different sizes and properties, you can wonder that if 2018 [Material 2] specs is not being used anymore then how we can still use headline5, headline6, bodyText1 etc in 2021 specs too ?

Thats because in the TextTheme class now has getters for those is defined. as below,

  TextStyle? get headline1 => displayLarge;

  TextStyle? get headline2 => displayMedium;

  TextStyle? get headline3 => displaySmall;

  TextStyle? get headline4 => headlineMedium;

  TextStyle? get headline5 => headlineSmall;

  TextStyle? get headline6 => titleLarge;

  TextStyle? get subtitle1 => titleMedium;

  TextStyle? get subtitle2 => titleSmall;

  TextStyle? get bodyText1 => bodyLarge;

  TextStyle? get bodyText2 => bodyMedium;

  TextStyle? get caption => bodySmall;

  TextStyle? get button => labelLarge;

  TextStyle? get overline => labelSmall;

So, when you say/use,

Text(
    'Sample text',
    style: Theme.of(context).textTheme.headline6?.copyWith(),
)

That basically calls the getter,

TextStyle? get headline6 => titleLarge;

Use cases of different fonts written as comment lines below

TextStyle? get headline1 => displayLarge;

/// Extremely large text.

TextStyle? get headline2 => displayMedium;  

// Very, very large text.
// Used for the date in the dialog shown by [showDatePicker].

TextStyle? get headline3 => displaySmall;

// Very large text.

TextStyle? headlineLarge;

// Headline styles are smaller than display styles. They're best-suited for
// short, high-emphasis text on smaller screens.

TextStyle? get headline4 => headlineMedium;

// Large text.

TextStyle? get headline5 => headlineSmall;

// Used for large text in dialogs (e.g., the month and year in the dialog
// shown by [showDatePicker]).

TextStyle? get headline6 => titleLarge;

// Used for the primary text in app bars and dialogs (e.g., [AppBar.title]
// and [AlertDialog.title]).

TextStyle? get subtitle1 => titleMedium;

// Used for the primary text in lists (e.g., [ListTile.title]).

TextStyle? get subtitle2 => titleSmall;

// Used for the primary text in lists (e.g., [ListTile.title]).

TextStyle? get bodyText1 => bodyLarge;

// Used for emphasizing text that would otherwise be [bodyText2].

TextStyle? get bodyText2 => bodyMedium;

// The default text style for [Material].

TextStyle? get caption => bodySmall;

// Used for auxiliary text associated with images.

TextStyle? get button => labelLarge;

// Used for text on [ElevatedButton], [TextButton] and [OutlinedButton].

TextStyle? labelMedium;

// Label styles are smaller, utilitarian styles, used for areas of the UI
// such as text inside of components or very small supporting text in the
// content body, like captions.

TextStyle? get overline => labelSmall;

// The smallest style.
// Typically used for captions or to introduce a (larger) headline.

And below is the predefined code for you can copy paste to your theme setup.

ThemeData.light().copyWith(
    textTheme: const TextTheme(
      displayLarge: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 57, height: 64, letterSpacing: 0, fontWeight: FontWeight.normal),
      displayMedium: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 45, height: 52, letterSpacing: 0, fontWeight: FontWeight.normal),
      displaySmall: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 36, height: 44, letterSpacing: 0, fontWeight: FontWeight.normal),
      headlineLarge: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 32, height: 40, letterSpacing: 0, fontWeight: FontWeight.normal),
      headlineMedium: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 28, height: 36, letterSpacing: 0, fontWeight: FontWeight.normal),
      headlineSmall: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 24, height: 28, letterSpacing: 0, fontWeight: FontWeight.normal),
      titleLarge: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 22, height: 28, letterSpacing: 0, fontWeight: FontWeight.w500),
      titleMedium: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 16, height: 24, letterSpacing: 0.15, fontWeight: FontWeight.w500),
      titleSmall: TextStyle(fontFamily: 'Roboto', color: Colors.black, fontSize: 14, height: 20, letterSpacing: 0.1, fontWeight: FontWeight.w500),
      bodyLarge: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 16, height: 24, letterSpacing: 0.15, fontWeight: FontWeight.normal),
      bodyMedium: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 14, height: 20, letterSpacing: 0.25, fontWeight: FontWeight.normal),
      bodySmall: TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 12, height: 16, letterSpacing: 0.4, fontWeight: FontWeight.normal),
      labelLarge: TextStyle(fontFamily: 'Roboto', color: Colors.black87, fontSize: 14, height: 20, letterSpacing: 0.1, fontWeight: FontWeight.w500),
      labelMedium: TextStyle(fontFamily: 'Roboto', color: Colors.black, fontSize: 12, height: 16, letterSpacing: 0.5, fontWeight: FontWeight.w500),
      labelSmall: TextStyle(fontFamily: 'Roboto', color: Colors.black, fontSize: 11, height: 16, letterSpacing: 0.5, fontWeight: FontWeight.w500),
    ),
  )

Bonus 1 : If you want to keep same as default and change only some, then you can use below code,

textTheme: Typography().black.copyWith(
  displayLarge: const TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 57, height: 64, letterSpacing: 0, fontWeight: FontWeight.normal),
),

Bonus 2 : if you want to use themes and styles of material 3 by default then in theme you just need to turn on a useMaterial3 like below

ThemeData.light().copyWith(
  useMaterial3: true,
  textTheme: Typography().black.copyWith(
    displayLarge: const TextStyle(fontFamily: 'Roboto', color: Colors.black54, fontSize: 57, height: 64, letterSpacing: 0, fontWeight: FontWeight.normal),
  ),
)

More Flutter theme related stories will come, stay tuned.