Fwd: Re: Typography HIG

[Sebastian Kügler]

On Thursday, November 15, 2012 19:48:22 Thomas Pfeiffer wrote:
> Hi everyone,
> Andrew Lake has written up some ideas for a typography guideline for Plasma
> Active. I'm still working on creating an HIG based on it, but as Aaron
> suggested, you may be interested in the raw input from Andrew as well, so
> you'll find it attached.

First of all, thanks both for working on this. I think good typography 
guidelines can really make a huge difference. It's also a bit of a sore point 
to me, since it's used a little ad-hoc currently.

More detailed comments, however:

In general I'd like to see font size used as primary means for distinction 
between levels, bold font usage should be reduced to an absolute minimum (and 
certainly not to style headings, at most to emphasize words within text. The 
same goes for italics, so maybe bold for emphasis, italics for quotes. 
Capitalization should not be used at all, this leads to "screaming UIs". 
Translucent fonts are a good means for "additional info" or secondary text 
(such as a date in a microblog message, for example, often combined with 
"smaller text" in order to not distract from the main content, or for sub 
titles. 
(This is roughly what I've been implementing in Active Settings, in the 
microblog app, in the ownCloud modules and to a certain degree in the News 
Reader app.)

In our code, I think these typography guidelines need to be implemented in two 
ares: Plasma::Theme::styleSheet() and in PlasmaExtras.
Plasma::Theme::styleSheet() was introduced I think 1.5 years ago, it can be 
used in a WebView to style structured text, and covers things like heading, 
paragraphs and links (<h1>, <h2>, {...}, <p>, <a ...>).
About half a year ago, we introduced a number of components in Plasma Quick 
that allow us to style text consistently. It's based on text structure and 
contains Title, Heading (of level 1 to 5) and Paragraph and they all inherit 
from PlasmaComponents.Label. 

When/if those are used, we gain much tighter control on how typography is used 
throughout Plasma, leading to a more consistent appearance of "everything 
text". The usage guidelines for those are missing, and the components are also 
not perfect yet. I suppose the style of those components will be changed 
according to what we make out of this typography guideline.

I've attached an example QML file which you can use to test the components and 
play around with it. The code should be pretty self-explanatory, even to the 
QML-untrained. =)

You can run it with 
qmlviewer -I `kde4-config --prefix`/lib/kde4/imports/ Typography.qml

I've committed this as a new page to the widgetgallery in kdeexamples.

There's one more thing that has been bugging me forever with respect to 
typography: Our font, or rather the font that ends up being default on 
different distros. I think only Ubuntu chooses this consciously, for branding 
reasons, in all other implementations, it ends up being whatever is linked to 
"Sans" and can be Helvetica in some cases. It doesn't look exactly modern. I 
think the Oxygen font is mature enough, and we should change our default from 
Sans to Oxygen (with proper fallbacks). So more control over fonts on our 
side, distros that want to change it can still do so.
In Plasma active we're using Droid Sans as default so far. It's a nice font 
but should also be changed to Oxygen. (That's basically what the "Typeface" 
part  in the pdf says, but specific to Plasma.)

Moreover, the Typography guideline should be applied to all of Plasma, not 
just Plasma Active.

Thanks again for the effort on this so far. It might not be too evident, but I 
think the guidelines are already pretty good (especially many of the details 
are very valuable things to codify, especially bits about alignment, UI 
balance, etc.).

I'm volunteering to implement the changes needed, based on the typography. :)

Cheers,
-- 
sebas

http://www.kde.org | http://vizZzion.org | GPG Key ID: 9119 0EF9
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Typography.qml
Type: text/x-qml
Size: 2474 bytes
Desc: not available
URL: <http://mail.kde.org/pipermail/active/attachments/20121119/af54b2a6/attachment.bin>