Design/Typography: Difference between revisions
update Typeface section, update Size section, add a Text color section, add section headings for accessibility links and a seealso link |
|||
Line 6: | Line 6: | ||
==Vector typeface specifications== |
==Vector typeface specifications== |
||
{{outdated}} |
|||
;Headings: <source lang="CSS">font-family: "Linux Libertine", Georgia, Times, serif;</source> |
;Headings: <source lang="CSS">font-family: "Linux Libertine", Georgia, Times, serif;</source> |
||
Serif headings have been tested on Wikipedia mobile and have received a positive response.{{cn}} With applying these changes to desktop, we are aiming for consistency between desktop and mobile styles.'' |
Serif headings have been tested on Wikipedia mobile and have received a positive response.{{cn}} With applying these changes to desktop, we are aiming for consistency between desktop and mobile styles.'' |
||
;Body copy: <source lang="CSS">font-family: |
;Body copy: <source lang="CSS">font-family: sans-serif;</source> |
||
Body copy (the main text of pages) was initially set to "Helvetica Neue, Helvetica, Arial, sans-serif", but due to issues on non-Latin wikis, has been reverted to "sans-serif" until a better solution is found. |
|||
While Georgia and Helvetica are fonts optimized for the web, we can see that body gracefully degrades to Arial because it is freely available on nearly every computer and operating system while being a screen-friendly typeface. After that, there is a free font, Liberation Sans, and finally a fallback that is always available, sans-serif. This selection may change as other typefaces develop ubiquity. For the near future, Arial will continue to serve as WMF's fallback. On Linux-based operating systems, Nimbus Sans L & Liberation Sans will be specified as the san-serif fonts. Note that free systems may also substitute other free fonts for proprietary ones mentioned earlier in the stack. |
|||
==Type size== |
==Type size== |
||
A [[Wikimedia Foundation Design/Typography/Audit|Typography audit]] is available. It shows a lack of consistent type sizes and colors. |
A [[Wikimedia Foundation Design/Typography/Audit|Typography audit]] is available. It shows a lack of consistent type sizes and colors. |
||
MediaWiki's default Vector skin sets font-size for <code>#bodyContent</code> at 0. |
MediaWiki's default Vector skin sets font-size for <code>#bodyContent</code> at 0.875em, this becomes 14px in Chromium and Firefox. |
||
Type size for navigation elements in the left are marginally reduced by 0.1-0.3 em to help them fade to the background in comparison to the article which is the foreground. Since the navigation areas are distinct, we expect that changes in the size will not hamper clicking on the links. |
Type size for navigation elements in the left are marginally reduced by 0.1-0.3 em to help them fade to the background in comparison to the article which is the foreground. Since the navigation areas are distinct, we expect that changes in the size will not hamper clicking on the links. |
||
Line 31: | Line 31: | ||
[[File:Font-multiple-script-test.png|thumb|Typography experiment applied to different languages: Latin, Korean (with some Chinese characters), Malayalam, Bengali and Tibetan.]] |
[[File:Font-multiple-script-test.png|thumb|Typography experiment applied to different languages: Latin, Korean (with some Chinese characters), Malayalam, Bengali and Tibetan.]] |
||
When looking for the appropriate text metrics such as font size or line height, different scripts should be taken into consideration.<!-- have they? |
When looking for the appropriate text metrics such as font size or line height, different scripts should be taken into consideration.<!-- have they? --> Scripts differ in the density of their glyphs (e.g., [https://en.wikipedia.org/wiki/Chinese_language Chinese]) and their height (e.g., [[:w:Javanese script|Javanese]], [[:w:Burmese|Burmese]], [[:w:Telugu script|Telugu]]). On the one hand, an appropriate font size will help to identify all the strokes of "dense" glyphs. On the other hand, an appropriate line height will avoid glyphs from different lines to clash.<!-- what font-size and line-height specifications have been applied to what scripts? --> |
||
The default text metrics provided should result in legible text for as many scripts as possible, and making custom adjustments to some scripts only in exceptional cases.<!-- What custom adjustments have been made? --> |
The default text metrics provided should result in legible text for as many scripts as possible, and making custom adjustments to some scripts only in exceptional cases.<!-- What custom adjustments have been made? --> |
||
An initial test was done for several scripts using the current metrics proposed, resulted in legible text for scripts that had presented problems in the past. More adjustments are probably needed in the future, for which feedback from native readers of all different scripts we support is highly appreciated. |
An initial test was done for several scripts using the current metrics proposed, resulted in legible text for scripts that had presented problems in the past. More adjustments are probably needed in the future, for which feedback from native readers of all different scripts we support is highly appreciated. |
||
==Text color== |
|||
Since the [[Typography refresh]] in 2014, the body font is color #252525. |
|||
Text should always have sufficient contrast, to be accessible. Use http://snook.ca/technical/colour_contrast/colour.html to check that the text color and background color you are using, pass the WCAG2 AA compliance level. On a white background, this means grey text of anything lighter than #777777 is not allowed. The only exceptions should be for elements that do not actually need to be legible, such as the word "Search" when used as the placeholder text in a search field. |
|||
If you are using non-monochrome colors, check for contrast using the snook.ca tool, and check for color-blindness accessibility using one of these tools: |
|||
* http://colorfilter.wickline.org/ E.g. http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=en.wikipedia.org/wiki/Help%3ALink_color;t=n (and then click the options inside the floating navbox) |
|||
* http://www.color-blindness.com/coblis-color-blindness-simulator/ (upload an image, and then simulate it in 8 types of color blindness) |
|||
* https://michelf.ca/projects/sim-daltonism/ (Mac only) |
|||
See [[:en:Color blindness]] for details and prevalence of each type. |
|||
==Grids== |
==Grids== |
||
Line 46: | Line 57: | ||
== Accessibility & legibility == |
== Accessibility & legibility == |
||
{{See also|Accessibility and usability cleanup}} |
|||
;Contrast |
|||
* [http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast Lighthouse International: Effective Color Contrast] |
* [http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast Lighthouse International: Effective Color Contrast] |
||
* [http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/ Lighthouse International: Making Text Legible] |
* [http://www.lighthouse.org/accessibility/design/accessible-print-design/making-text-legible/ Lighthouse International: Making Text Legible] |
||
Line 51: | Line 64: | ||
* [http://www.hobo-web.co.uk/web-designing-for-dyslexic/ Web Designing for Dyslexia] |
* [http://www.hobo-web.co.uk/web-designing-for-dyslexic/ Web Designing for Dyslexia] |
||
;Line length |
|||
* [http://baymard.com/blog/line-length-readability Readability: the Optimal Line Length] |
* [http://baymard.com/blog/line-length-readability Readability: the Optimal Line Length] |
||
* [http://www.bramstein.com/projects/typeset/ Improving the ragged right edge of paragraphs] |
* [http://www.bramstein.com/projects/typeset/ Improving the ragged right edge of paragraphs] |
||
==Research references== |
==Research references== |
||
* [http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/ Case Study — Typographic Design Patterns And Current Practices (2013 Edition)] |
* [http://www.smashingmagazine.com/2013/05/17/typographic-design-patterns-practices-case-study-2013/ Case Study — Typographic Design Patterns And Current Practices (2013 Edition)] |
Revision as of 00:36, 11 September 2014
Type is a core visual element of Wikipedia's language. The choices around typography are carefully considered for:
- Readability: Typefaces must be legible and readable at all sizes. Type as an element must help differentiate interface from article content.
- Accessibility: Dyslexia and visual impairments must not get in the way of access. We must enable access for users with impairments.
- Availability: All typefaces we use must be already available, or made available. Any selections must degrade gracefully across devices and platforms (OS X, Windows, Linux, Mobile Platforms)
- Consistency: A consistent visual experience across desktop and mobile.
Vector typeface specifications
- Headings
font-family: "Linux Libertine", Georgia, Times, serif;
Serif headings have been tested on Wikipedia mobile and have received a positive response.[citation needed] With applying these changes to desktop, we are aiming for consistency between desktop and mobile styles.
- Body copy
font-family: sans-serif;
Body copy (the main text of pages) was initially set to "Helvetica Neue, Helvetica, Arial, sans-serif", but due to issues on non-Latin wikis, has been reverted to "sans-serif" until a better solution is found.
Type size
A Typography audit is available. It shows a lack of consistent type sizes and colors.
MediaWiki's default Vector skin sets font-size for #bodyContent
at 0.875em, this becomes 14px in Chromium and Firefox.
Type size for navigation elements in the left are marginally reduced by 0.1-0.3 em to help them fade to the background in comparison to the article which is the foreground. Since the navigation areas are distinct, we expect that changes in the size will not hamper clicking on the links.
Paragraph justification
We avoid justified type for paragraph blocks altogether. Justified type creates "rivers" and has a "gutter" side effect which can appear as a moire pattern. We will employ aligned text (left for left-to-right languages; right-aligned for right-to-left languages).
Shift & emphasis
In the User Interface and documentation, only one shift is required for emphasis. If a word or phrase is italicized it does not also need bolding. Further, use bold and italic as little as possible as they are tools for emphasis. If everything is emphasized, then nothing is emphasized.
Multiple script support
![](http://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Font-multiple-script-test.png/220px-Font-multiple-script-test.png)
When looking for the appropriate text metrics such as font size or line height, different scripts should be taken into consideration. Scripts differ in the density of their glyphs (e.g., Chinese) and their height (e.g., Javanese, Burmese, Telugu). On the one hand, an appropriate font size will help to identify all the strokes of "dense" glyphs. On the other hand, an appropriate line height will avoid glyphs from different lines to clash.
The default text metrics provided should result in legible text for as many scripts as possible, and making custom adjustments to some scripts only in exceptional cases.
An initial test was done for several scripts using the current metrics proposed, resulted in legible text for scripts that had presented problems in the past. More adjustments are probably needed in the future, for which feedback from native readers of all different scripts we support is highly appreciated.
Text color
Since the Typography refresh in 2014, the body font is color #252525.
Text should always have sufficient contrast, to be accessible. Use http://snook.ca/technical/colour_contrast/colour.html to check that the text color and background color you are using, pass the WCAG2 AA compliance level. On a white background, this means grey text of anything lighter than #777777 is not allowed. The only exceptions should be for elements that do not actually need to be legible, such as the word "Search" when used as the placeholder text in a search field.
If you are using non-monochrome colors, check for contrast using the snook.ca tool, and check for color-blindness accessibility using one of these tools:
- http://colorfilter.wickline.org/ E.g. http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=en.wikipedia.org/wiki/Help%3ALink_color;t=n (and then click the options inside the floating navbox)
- http://www.color-blindness.com/coblis-color-blindness-simulator/ (upload an image, and then simulate it in 8 types of color blindness)
- https://michelf.ca/projects/sim-daltonism/ (Mac only)
See en:Color blindness for details and prevalence of each type.
Grids
- Grids are Good - SXSW Presentation
- Thinking with Type: Grids
- Setting Web Type to a Baseline Grid - Opera Browser Guidelines
- Typography Is a Grid - Hyphen Press
- On the Grid - Khoi Vinh (Design Lead @ NY Times)
- Applying Mathematics to Web Design - Smashing Magazine
Accessibility & legibility
- Contrast
- Lighthouse International: Effective Color Contrast
- Lighthouse International: Making Text Legible
- Web Design for Dyslexic Users
- Web Designing for Dyslexia
- Line length