Re: Fwd: Re: Typography HIG
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
import QtQuick 1.1
import org.kde.plasma.components 0.1 as PlasmaComponents
import org.kde.plasma.extras 0.1 as PlasmaExtras
Item {
id: root
width: 640
height: 700
Column {
anchors {
fill: parent
margins: 12
}
spacing: 12
PlasmaExtras.Title {
text: Typography in Plasma Quick
}
PlasmaExtras.Heading {
level: 1
text: Examples of Text
}
PlasmaExtras.Heading {
level: 3
text: Email from Thomas
}
PlasmaExtras.Paragraph {
text: 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. 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
Re: Fwd: Re: Typography HIG
On Monday, November 19, 2012 13:45:42 Sebastian Kügler wrote: 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 on smaller screens, a benefit of using bold rather than larger font sizes is you get more compact presentations. in any case, i think we should focus on how we implement this so that it is consistent across Plasma Active and then try out various approaches and measure how they work in practice. Capitalization should not be used at all, this leads to screaming UIs. Translucent fonts are a good means for additional info or secondary using translucency has the downside of being .. well .. see-through :) a solid color would probably give more consistent results, assuming the themes set this correctly. In our code, I think these typography guidelines need to be implemented in two ares: Plasma::Theme::styleSheet() and in PlasmaExtras. Plasma::Theme::FontRole should probably also be extended. 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. yes, use of these components as well as modifying the text usage in buttons / tabs / etc should get us most of the way there. i expect we'll find areas in our UI that are using custom components that will need additional work 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. +1 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. =) ... I've committed this as a new page to the widgetgallery in kdeexamples. cool; i've update it to reflect the various 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. +1 In Plasma active we're using Droid Sans as default so far. It's a nice font but should also be changed to Oxygen. yep. Moreover, the Typography guideline should be applied to all of Plasma, not just Plasma Active. i think that's sort of implied :) Andrew's interest stemmed from Plasma Active, but we in the Plasma world know that the lines are all blurred. -- Aaron J. Seigo signature.asc Description: This is a digitally signed message part. ___ Active mailing list Active@kde.org https://mail.kde.org/mailman/listinfo/active
Re: Fwd: Re: Typography HIG
On Thursday, November 15, 2012 21:26:09 Marco Martin wrote:
* font classes so, right now we just have defaultFont, smallestFont.
what i see from the proposal seems to move the font classes and
configuration more similar to a text document, so stuff like header,
contents, active.. rather than the classes coming from the desktop (to
which i didn't do qml bindings yet) like titlebar, toolbar, desktop etc...
of the proposal i like the general idea of keeping it simple ;)
I would like indeed a more typographic text document approach, also to
consider is how much this will impact the work on the desktop as well...
We have the basics for that in PlasmaExtras: Title, Heading { level: int },
and Paragraph.
I haven't had time to read the proposed document in detail, but will attempt
to do so as soon as I'm back from travelling.
--
sebas
http://www.kde.org | http://vizZzion.org | GPG Key ID: 9119 0EF9
___
Active mailing list
Active@kde.org
https://mail.kde.org/mailman/listinfo/active
Re: Fwd: Re: Typography HIG
On Thursday, November 15, 2012 19:48:22 Thomas Pfeiffer wrote: Andrew Lake has written up some ideas for a typography guideline for Plasma very awesome stuff. his source document can be found here as well: http://goo.gl/S9LXP I just about fell off my chair when I saw that there were not one, not two .. but THREE typography proposals in there. this has pretty big implications for Plasma::Theme and opens some questions as to how to effectively style fonts in QML Components. the proposals include capitalization as well as things like usage of weight/italics (or lack thereof), and those are / can be handled separately in QML. particularly the capitalization implies we will need to provide some pass-through functions to style raw text properly. -- Aaron J. Seigo signature.asc Description: This is a digitally signed message part. ___ Active mailing list Active@kde.org https://mail.kde.org/mailman/listinfo/active
