It's about time that we started using light and ultra-bold font weights consistently throughout GNOME. This would look sooooo much better!
This would be a great opportunity to standardise on predefined text styles. This will allow us to update the text styling from the theme in future. It will also allow us to adjust text styles for accessibility purposes.
This is an initial schema we could try:
We should probably try and apply these in a small number of cases, to see how they work in practice, before we roll them out more generally. It should be noted that both Microsoft, Apple and Google define a greater number of styles than this, so we might want more ourselves.
We should think about what documents with nested sections should look like. This is relevant for user and developer documentation, books, and RSS readers and the like.
Good question. My feeling is that some big blocks of text might warrant a larger text size than you might use for a UI label (examples of this might include notes or emails). At the same time, there might be cases where paragraphs use the same text size as UI labels (like app descriptions in Software).
Saying that, neither Apple nor Microsoft make any reference to documents are larger text sizes for block paragraphs: they just say to use "body" text as standard.
As you can see, we already have mockups for some of those. It shouldn't be too hard to do screenshots of what the others would look like.
Eventually, we will need to provide updated typographic guidelines and run an initiative to have apps adopt them. However, I think the first step is to define the styles ourselves and try a limited rollout.
I don't know how a "limited rollout" would look for this.
"Rollout" was probably the wrong word to have used! My main idea was to test our initial set of styles against 3 or 4 apps to see how they work in practice, before we do anything else with them.
If we are moving towards treating views like documents, there should be more document structure in the widgetry.
Treating views like documents wasn't something that I particularly had in mind for this initiative... I was mostly just thinking of defining text sizes and weights.
Quick experiment in the inspector revealed that the font-weight property doesn't seem to be respected. letter-spacing has dramatic effects on metrics and tends to break layout.
Increase the weight of type-title and type-heading
Add an additional heading style; this would be bold and one step larger than than type-heading, for things like the "Details" and "Reviews" headings on the details pages
Add an additional style for the upgrade description ("Upgrade for the latest features...") - this would be like a large description - regular weight and around 16pt
Also, it would be really great to have a demo app for the text styles!
FYI: I have recently begun working on Cantarell again and am currently working on the numerals (they look too wide, weight tweaks here and there, the small figures are too big so fractions look bad, etc.), next up is revisiting the spacing of capital letters (spaced too widely) and various other things (making all math symbols and currencies tabular, removing the proportional variants). If you find anything wrong with the current design, let me know.
I'm not sure how well Cantarell works for captions, to be honest. The more I deal with it again, the more I think that the design works better at headlines than normal body text. Ah, the benefit of hindsight...
It seems fairly good overall. Main issues I can see are:
type-title-1 is maybe a bit big
You could argue that we don't need type-title-2 on the details pages, and that the larger text throws off the balance
For the upgrade banner, it might be better to have a regular-weight sub-heading; something like: type-large-subtitle { font-weight: 400; font-size: 13pt }
I'm with @jimmac it feels super strong in the Software screenshots.
Most of those instances in Software feel more suited to be headings than the in-your-face Ultrabold Title. I feel it works best when it's centred and prominent like in empty states:
As discussed on #gnome-design, message dialogs have some styling hard-coded which makes it impossible to change the style of the heading from Adwaita, without hacking up the message dialogs as I've done.
But it's not in the title currently (as we could just shorten this to "Authentication Required)...and I was thinking of the general case, we should probably not truncate titles at all of dialogs as it could hide information...but this would be an issue for the shell and not GTK right?
In a dense are like the calendar popover, the super strong heading really doesn't sit well with me and the elegant large day we have today looks way more elegant. Perhaps just separating the header witha bit of whitespace vertically would help.
Modal dialogs seem fairly inconsistent in terms of outer padding. The power off dialog seems more crammed than the volume busy dialog. Also the fullcolor/symbolic situation should probably be unified. That said, the strong titles in these modals do look nice to me in that context.
as we could just shorten this to "Authentication Required)...
Yes
and I was thinking of the general case, we should probably not truncate titles at all of dialogs as it could hide information...but this would be an issue for the shell and not GTK right?
In a dense are like the calendar popover, the super strong heading really doesn't sit well with me and the elegant large day we have today looks way more elegant.
For reference, this is what it looks like withlarge-title: calendar popover
Perhaps just separating the header witha bit of whitespace vertically would help.
Modal dialogs seem fairly inconsistent in terms of outer padding. The power off dialog seems more crammed than the volume busy dialog. Also the fullcolor/symbolic situation should probably be unified. That said, the strong titles in these modals do look nice to me in that context.
I haven't made any attempt to adjust spacing or layout so far, and that's something we'll probably need to do. I fear that it will require help from a developer.
gnome-shell#1343 (closed) covers dialog inconsistency. Using consistent text styles will be a step in the right direction but, yes, there's clearly more work to do.
What will happen if month name is long? For example, in Polish 30 day of October 2019 will be called "30 października 2019". With current font size is visible properly. What will happen with bigger font?
Also, IMHO light version of font is better than extra bold in calendar popover.
The other aspect of the issue is to adopt the new styles. Message dialogs use them in GTK4. Perhaps there other dialogs that could use them too? (I'm not sure how to look for those.)
The other thing is that none of this has landed in 3.24, which I think we do need: it would be a bit weird to have different typographic styles depending on the GTK version.
Some further exploration of the styles can be seen here. The styles in those mockups are mostly similar to what's listed above, with the following exceptions:
It's perhaps worth noting that none of those examples use the title-1 class. I left it in because I suspect that we might need it, but you could argue that we shouldn't include classes we haven't found a use for.