Commit d1bfb0aa authored by Alessandro Longo's avatar Alessandro Longo

Merge branch 'master' of ssh://git.kde.org/websites/hig-kde-org

parents b3a694fc 08043296
......@@ -43,15 +43,6 @@ Guidelines
Appearance
----------
An emblem that indicates status should take the form of a light-colored symbol
on top of a brightly-colored shape.
.. figure:: /img/emblem-warning.png
:alt:
Warning emblem
An emblem that indicates unread notifications should take the form of a
light-colored number inside a blue circle. The circle can become "pill-shaped"
if the number is very large.
......@@ -65,3 +56,6 @@ if the number is very large.
:alt:
Notification emblem with a large number
For symbolic icon emblems, see the :doc:`Breeze icon guidelines </style/icon>`.
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#1d99f3"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#f67400"/></svg>
source/img/Breeze-icon-design-1.png

11 KB | W: | H:

source/img/Breeze-icon-design-1.png

20.9 KB | W: | H:

source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
source/img/Breeze-icon-design-1.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-14.png

21.8 KB | W: | H:

source/img/Breeze-icon-design-14.png

52.3 KB | W: | H:

source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
source/img/Breeze-icon-design-14.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-15.png

18.8 KB | W: | H:

source/img/Breeze-icon-design-15.png

45.8 KB | W: | H:

source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
source/img/Breeze-icon-design-15.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-2.png

1.78 KB | W: | H:

source/img/Breeze-icon-design-2.png

3.98 KB | W: | H:

source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
source/img/Breeze-icon-design-2.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-3.png

5.76 KB | W: | H:

source/img/Breeze-icon-design-3.png

15.2 KB | W: | H:

source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
source/img/Breeze-icon-design-3.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-4.png

17 KB | W: | H:

source/img/Breeze-icon-design-4.png

28.8 KB | W: | H:

source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
source/img/Breeze-icon-design-4.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Breeze-icon-design-8.png

9.48 KB | W: | H:

source/img/Breeze-icon-design-8.png

19.3 KB | W: | H:

source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
source/img/Breeze-icon-design-8.png
  • 2-up
  • Swipe
  • Onion skin
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#2ecc71"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#27ae60"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#4d4d4d"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#3daee9"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#f47750"/></svg>
<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32v32H0z" fill="#232629"/></svg>
source/img/HIGMonoIcons.png

4.33 KB | W: | H:

source/img/HIGMonoIcons.png

6.65 KB | W: | H:

source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
source/img/HIGMonoIcons.png
  • 2-up
  • Swipe
  • Onion skin
source/img/Sample_color_icons.png

20.5 KB | W: | H:

source/img/Sample_color_icons.png

74.3 KB | W: | H:

source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
source/img/Sample_color_icons.png
  • 2-up
  • Swipe
  • Onion skin
source/img/emblem-public-on-folder.png

2.01 KB | W: | H:

source/img/emblem-public-on-folder.png

1.83 KB | W: | H:

source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
source/img/emblem-public-on-folder.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
......@@ -2,47 +2,154 @@ Typography
==========
The guideline helps ensure that typography is always in harmony with the overall visual design.
Guidelines
----------
Typeface Styles
^^^^^^^^^^^^^^^
A selection of typeface styles are allocated throughout the user interface as follows. Set system defaults and conduct design activities using the design typeface styles. To respect user typeface choices while preserving the distinction afforded to each typographic category, implement the design using the corresponding system typeface styles.
---------------
KDE's default font is *Hack* for monospace and *Noto Sans* for everything else.
The default font size is 10pt. KDE Plasma and Applications display seven
variants of this typeface.
.. figure:: /img/Typography1.png
:alt: Show different typefaces in KDE
:figclass: border
The seven default typeface styles
Typeface settings can be adjusted by the user and have
:doc:`great influence on sizing and spacing </layout/units>` in KDE's
workspace and applications.
.. image:: /img/Typography-noto.png
* The monospace typeface should be used for code content, filenames, file paths.
* Typography is treated like any other visual element when considering
:doc:`spacing </layout/metrics>` and
:doc:`alignment </layout/alignment>`.
* Multi-line blocks of text should be either left or right aligned; avoid center
alignment.
* Limit the range of any dynamic type resizing to preserve the intended visual
hierarchy. For example, don't resize body text to be bigger than
the heading text. Or don't resize the section heading text to fit more words
so that it's smaller than the body text. Or don't resize text of relatively
lesser importance so that it's bigger than text or other visual elements that
should be of relatively greater importance.
.. warning::
|devicon| Never use **Text{}** in Kirigami or Plasma, because it
doesn't follow the system font rendering settings. See :ref:`typography-code`
for implemntation.
.. warning::
|devicon| Never use a hardcoded value of px or pt to define a
font size. See the entry about :doc:`units </layout/units>` for more
information.
.. hint::
|devicon| It is recommended to use the system fonts available via ''QFontDatabase::systemFont''.
|designicon| The px values are only for design and mockup; don't use them
for development.
* A monospace version of the ''Content Body 1'' typeface should be used for code content.
* Typography is treated like any other visual element when considering [[KDE_Visual_Design_Group/HIG/Placement|spacing]] and [[KDE_Visual_Design_Group/HIG/Alignment| alignment]].
* Limit the number of typeface style variations to about three in any single design.
* Multi-line blocks of text should be either left or right aligned; avoid center alignment for multi-line blocks of text.
* Point sizes correspond to actual typeface sizes at the default xorg 96 dpi setting, where 1 pt = 1/72 inch (0.35mm). Resize all visual elements, including type, when scaling the user interface for higher dpis.
* Limit the range of any dynamic type resizing to preserve the intended visual hierarchy. Dynamically resizing the type of a text element may alter the visual hierarchy. For example, don't resize body text till it's bigger than the heading text. Or don't resize the section heading text to fit more words until it's smaller than the body text for which it provides a heading. Or don't resize text of relatively less importance till it's bigger than text or other visual elements that should be of relatively more importance.
- Header 1: Noto Sans 18px
- Header 2: Noto Sans 13px
- Header 3: Noto Sans 12px
- Header 4: Noto Sans 11px
- Body: Noto Sans 10px
- Code: Hack 10px
- Small: Noto Sans 8px
Typographic Category Examples
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Menus - Menu bar, Popup menus
Guidelines
----------
Content Title - Category title, Panel popups title
Components
^^^^^^^^^^
Content Header - Section headers
Most :doc:`components </components/index>` have a recommended typeface style.
If you create a new component you should give it the same typeface style as
similar existing components.
Content Body 1 - Text content, Icon grid items, List items
Content
^^^^^^^
Content Body 2 - Captions , tooltips
You can use any typeface styles to structure your content, but try not to
overuse the larger headings.
Properties and Tools - Property panel, Toolbar, Status bar
When the visual design calls for an area of exceptional focus, a larger
typeface size may be used. In this case use a Light typeface weight to keep the
stroke width similar to other styles throughout the interface . All other
typeface characteristics for the typographic category should be maintained. For
such exceptions to be effective, they must be very rare.
Text Color and Contrast
^^^^^^^^^^^^^^^^^^^^^^^
The text [[KDE_Visual_Design_Group/HIG/Color|color]] and background [[KDE_Visual_Design_Group/HIG/Color|color]] can be varied to provide additional hierarchical hints (e.g. selected text). However, the contrast between the text and background color must be sufficient to preserve legibility of the text.
The text :doc:`color <./color/index>` and
:doc:`background color <./color/index>` can be varied to provide additional
hierarchical hints (e.g. selected text). However, the contrast between the text
and background color must be sufficient to preserve legibility of the text.
Words per line
^^^^^^^^^^^^^^
Unless the content is long-form text like a book or a report, try to keep line lengths to no more than about eight to ten words per line. For typographic categories that use an all caps typeface, try to keep line lengths to no more than about three to four words per line.
Exceptions
^^^^^^^^^^
When the visual design calls for an area of exceptional focus, a larger typeface size may be used. For a significantly larger typeface use a Light typeface weight to keep the stroke width similar to other typeface styles throughout the interface . All other typeface characteristics for the typographic category should be maintained. For such typeface exceptions to be effective, they must be rare.
Unless the content is long-form text like a book or a report, try to keep line
lengths to no more than about eight to ten words per line. For styles requiring
the use of an all-caps typeface, try to keep line lengths to no more
than about three to four words per line.
.. _typography-code:
Code
----
Kirigami
^^^^^^^^
.. code-block:: qml
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
Kirigami.Heading {
level: 1
text: "Header 1"
}
Kirigami.Heading {
level: 4
text: "Header 4"
}
Controls.Label {
font.pointSize: 24
text: "Extra large title"
}
Controls.Label {
text: "Normal text in your application"
}
Controls.Label {
text: "Use this to label buttons, checkboxes, ..."
}
Plasma
^^^^^^
.. code-block:: qml
...
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.components 3.0 as PlasmaComponents
...
PlasmaExtras.Heading {
level: 1
text: "Header 1"
}
PlasmaExtras.Heading {
level: 4
text: "Header 4"
}
PlasmaComponents.Label {
font.pointSize: 24
text: "Extra large title"
}
PlasmaComponents.Label {
text: "Normal text in your application"
}
PlasmaComponents.Label {
text: "Use this to label buttons, checkboxes, ..."
}
......@@ -5,11 +5,9 @@ Purpose
-------
*Capitalization* is a feature of case-sensitive languages to foster
relevance. In terms of software it draws attention to words with capital
letters. For a consistent look and feel of the software it is important
to implement capitalization consistently. On the other hand,
capitalization slows down translation and increases the risk of
inconsistent terminology.
relevance by drawing attention to words with capital letters. For a consistent
look and feel of the software, it is important to implement capitalization
consistently.
Guidelines
----------
......@@ -21,38 +19,23 @@ Title Capitalization
~~~~~~~~~~~~~~~~~~~~
Title capitalization is when every word in a sentence, statement,
phrase, or label are capitalized except for certain words. Words with
less than five letters are generally lowercase in titles, unless they
are the first or last words in a title.
phrase, or label is capitalized except for certain words. Use title
capitalization primarily for titles and headers, but also for command labels.
For example:
- Titles and headers on windows, dialog boxes, tabs, lists, group boxes, tree
views, etc.
- Menu titles and menu item labels
- Button labels
Do not capitalize:
- Articles: a, an, the
- Coordinating Conjunctions: and, but, or, for, nor, etc.
- Coordinating conjunctions: and, but, or, for, nor, etc.
- Prepositions (fewer than five letters): on, at, to, from, by, etc.
Always capitalize
- Nouns (man, bus, book)
- Adjectives (angry, lovely, small)
- Verbs (run, eat, sleep)
- Adverbs (slowly, quickly, quietly)
- Pronouns (he, she, it)
- Subordinating conjunctions (as, because, that)
Capitalize everything else.
Use title capitalization in the following cases:
- Window and dialog box titles
- Group box / group line labels
- Button labels
- Tab labels
- Listview column headers
- Menu titles / menu items
- Derivatives of KCommand
- Combobox items
- Listbox items
- Tree list items
- Other heading/title text
Sentence Style Capitalization
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......@@ -62,18 +45,15 @@ statement, phrase, or label is capitalized and all other words are lower
case. The only exception to this is proper nouns which are always
capitalized.
Use sentence style capitalization in the following cases:
Use sentence style capitalization for text that is or could be read as a
sentence, or that is part of a sentence in conjunction with other elements.
For example:
- Edit box labels
- List box labels
- Combo box labels
- Spin box labels
- Tooltip text
- Placeholder text in text fields
- Checkbox labels
- Option button labels
- Slider labels
- Pop-up hint text
- Dialog header/description
- Other non heading/title text
- Labels to the left of controls in a Form Layout
- Descriptions of anything
Acronyms/Initialisms, Internet
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment