Simplify default font sizes

[juanruitina]

I've noticed over the last few months how we use many different font sizes across components. As a result, it is frequent that in the same screen we have different font sizes that do not respond to hierarchy (and sometimes convey a wrong sense of hierarchy), also making them visually unappealing.

See for instance this design @d-loose is currently building based on a design on mine, how the default font size of the text in the input field and the checkbox label is different to that of the rest of the page, for no good reason:

And this is what it looks like with overrides so font sizes make sense:

(Another example was this dialog)

I quite agree with GNOME's approach for instance in the Settings app, basically using the equivalent to bodyMedium for almost everything (even headings!). See here how everything on the page has the same font size except the lighter gray descriptions below some options (clearly secondary text, makes sense hierarchically). It even allows for slightly higher information density:

I think that bodyMedium should be the default font size for:

• Labels for radio buttons, checkboxes, switches
• Text in all input fields (not labels)
• Items in the sidebar
• Titles in yaruInfo panels and tiles/rows (hierarchy can be conveyed by either use of bold for title or lighter, smaller text for the description)

I think it would be OK to keep bigger font sizes for headings, given that the bigger size indeed conveys hierarchy. I also think there is a case for developers intentionally overriding font sizes in some circumstances. But I think it would be good to have simpler defaults.

(I did notice that bodyMedium is slightly smaller than GNOME's default font size, but that's a separate problem we can look into, probably related to units)

[Feichtmeier]

I agree with the proposal!

My only question is where we should do this. In the widgets (if not existent create them) or the text theme? CC @d-loose @Jupi007 @ashuntu @spydon @jpnurmi

[ashuntu]

From briefly looking at some of these widgets, it seems like most of these can be solved by overriding the ThemeData for specific widget types, like inputDecorationTheme or listTitleTheme.

I know for the Installer and App Center we use manual size overrides somewhat often so it would be nice to rely more heavily on Yaru theming to be consistent.

[Feichtmeier]

From briefly looking at some of these widgets, it seems like most of these can be solved by overriding the ThemeData for specific widget types, like inputDecorationTheme or listTitleTheme.

I know for the Installer and App Center we use manual size overrides somewhat often so it would be nice to rely more heavily on Yaru theming to be consistent.

I think using this inside the text theme of yaru.dart would be totally fine. i just wonder if it would be cool to have different font sizes when someone choses between headlinemedium and bodylarge. But I dont have a strong opinion on this just thinking it would be cool to have the same font size accross our apps easily re-usable just wondering where the correct place is

[Muqtxdir]

hi,

late to the discussion but this is what majority of the gtk/adwaita apps extend their font label classes, maybe this can serve as reference:

/**********************
 * General Typography *
 **********************/

.title-1 {
  font-weight: 800; // for Ubuntu font we can prefer 600
  font-size: 20pt;
}

.title-2 {
  font-weight: 800; // for Ubuntu font we can prefer 600
  font-size: 15pt;
}

.title-3 {
  font-weight: 700; // for Ubuntu font we can prefer 550
  font-size: 15pt;
}

.title-4 {
  font-weight: 700; // for Ubuntu font we can prefer 550
  font-size: 13pt;
}

.heading {
  font-weight: 700; // for Ubuntu font we can prefer 550
  font-size: 11pt;
}

.body {
  font-weight: 400;
  font-size: 11pt;
}

.caption-heading {
  font-weight: 700;  // for Ubuntu font we can prefer 550
  font-size: 9pt;
}

.caption {
  font-weight: 400;
  font-size: 9pt;
}