Hi,
Would you think linking tools like http://type-scale.com can be useful for making recommendations from https://techbase.kde.org/Projects/Usabi ... Typography more specific?

What "Scale" would you prefer (or is that too detailed question)?

At the moment the "Colors system settings" only refer to what's available via QStyle, no rich text stuff like font size and family of headers. At most it's color of links, accents and alike.



But looking at KDE UIs there are places where various headings are used, e.g.



Kexi uses headings: https://www.calligra.org/news/first-bet ... w-project/

So does Kontact: https://www.kde.org/images/screenshots/kontact.png

etc. etc.

I think that recommendations for rich text style could be part of the KDE visual identity. I don't know to what extent.

I'm confused, doesn't the typography HIG provide recommendations for headings and other typography categories that includes type, weight and size?

I'd say I miss more typographic styles, and scale.

First conclusions, then examples.
I wouldn't say we have page titles (as in web), we only have just captions mentioned so far. Our scale is in reality smaller than 1.06 the smallest one from the list I present below, and clearly one that's nonexistent at http://type-scale.com because even the smallest Minor Second scale 1.067 has the max page title scaled up by only 1.296.

So is our style based on typography to the same extent as the real world?

We also have the smallest default body font. Myself while having still a good sight, I am setting body to 12pt after installing Plasma Desktop.

Moreover: we miss fallback fonts. Maybe it's enough to tell it's Helvetica or so?

I believe app devs would invent something themselves if we lack this basic information. I do. Let's see how it looks for 99% of the population:

1. Android, while it's usually for smaller form factors, contains 12, 14, 16, 20 and 34

http://www.google.com/design/spec/style ... ard-styles



Title: 20pt, Desktop Body 2: 13pt -- >scale 1.538

2. Current Windows and Windows Phone: http://msdn.microsoft.com/en-us/library ... 00394.aspx

Desktop Header: 42pt, Subheader 20pt, Desktop Body: 11pt -- >scale 1.538 --identical to Android

3. Mac OS X
4. iOS

I have not looked at the guidelines too much, but clearly the scale is similar at least; headings are big since the last version:


https://developer.apple.com/library/mac ... uidelines/

Mac cleverly hides concrete size values in constants of the API but designers know the values (probably needed when they're using 3rd-party tools for prototyping), eg.:



(from http://stackoverflow.com/questions/2051 ... es-in-ios7)

The scale looks like 1.33 at least but from the Yosemite screenshot above we clearly see there are big headers too.

What we're similar to? Discontinued WIndows Vista and 7!

From http://www.microsoft.com/en-us/download ... px?id=2695:

"Main instructions" type is still used as the Heading in UIs (see http://i.imgur.com/w1zUDbU.png) so the scale is bigger than KDE's: 12pt/9pt == 1.33


And some Windows Document typography, see how the scale is 1.88:



I think one of main areas of our discussion is whether be closet to Document, newspapers typography or GUI traditional very limited typography. Or blend these two. I see the world wen for the blend.

Please also note, it's a popular note by our users regarding KDE Plasma 4: they see the Plasma typography being largely unrelated to the apps typography. Notice how the Heading here gives easily the scale of 2.0:



Well, I'd say we're only starting to take some care of apps typography in KDE.

PS: do we cover Plasma typography somewhere? Can't both worlds be largely mixed?

Edit: "Calculate your own visual type scale" is also interesting at http://www.ibm.com/design/language/fram ... aphy.shtml

In Plasma we don't specify hardcoded font sizes but use the one provided by the theme. Usually these are the "normal" font, the "smallest readable" font, as well as headings derived from the normal font size which basically looks like this:

Code: Select all

var n = theme.defaultFont.pointSize;
if (level > 4) {
    return n
} else if (level < 2) {
    return n + (5*step)
} else {
    return n + ((5-level)*2)
}


with level being a number [1, 5] and step being 2 by default, similar to the HTML heading tags. It does not scale the font directly but adds "arbitrary" numbers to it.
Perhaps we need a similar unified heading item for widget-based apps too.

@kbroulik yes, would be nice to have it defined by the KStyle.