Joomla

Difference between revisions of "Brand Identity Elements/Typography"

From Joomla! Documentation

< Joomla:Brand Identity Elements
m (Link to old brand manual removed)
 
(14 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
{{section portal heading|icon=joomla|title=<translate><!--T:2-->
 
{{section portal heading|icon=joomla|title=<translate><!--T:2-->
 
Typography</translate>}}
 
Typography</translate>}}
<translate><!--T:3-->
+
__TOC__
 +
<translate><!--T:12-->
 
The tagline’s typeface is Source Sans Pro Regular, designed by Paul D. Hunt for Adobe. It is a sans serif typeface intended to work well in user interfaces. Do not use a different typeface other than the one displayed here.</translate>
 
The tagline’s typeface is Source Sans Pro Regular, designed by Paul D. Hunt for Adobe. It is a sans serif typeface intended to work well in user interfaces. Do not use a different typeface other than the one displayed here.</translate>
==Primary typeface==
+
<translate>==Primary Typeface== <!--T:13--></translate>
 
<translate><!--T:4-->
 
<translate><!--T:4-->
 
The primary typeface chosen to communicate the Joomla! voice is '''Source Sans Pro'''. From body copy to headlines,
 
The primary typeface chosen to communicate the Joomla! voice is '''Source Sans Pro'''. From body copy to headlines,
 
from print to web, this typeface will cover all design needs. Source Sans Pro is an open source type family designed by Paul D. Hunt. It is classified as sans serif and it was developed to work well both for print
 
from print to web, this typeface will cover all design needs. Source Sans Pro is an open source type family designed by Paul D. Hunt. It is classified as sans serif and it was developed to work well both for print
 
and screen usage. The family currently includes six weights, from ExtraLight to Black, in upright and italic styles.</translate>
 
and screen usage. The family currently includes six weights, from ExtraLight to Black, in upright and italic styles.</translate>
*''Tone:'' Contemporary, brilliant, friendly.
+
<translate><!--T:14-->
*Best used in: Headlines, body copy.
+
*''Tone:'' Contemporary, brilliant, friendly.</translate>
*''Availability:'' The Source Sans family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.
+
<translate><!--T:15-->
*''Language support:'' Because Joomla! is used around the world, we chose a font that supports a wide variety of languages using Latin script, including Western and Eastern European languages, Vietnamese, and the pinyin Romanization of Chinese.
+
*''Best used in:'' Headlines, body copy.</translate>
 +
<translate><!--T:16-->
 +
*''Availability:'' The Source Sans family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.</translate>
 +
<translate><!--T:17-->
 +
*''Language support:'' Because Joomla! is used around the world, we chose a font that supports a wide variety of languages using Latin script, including Western and Eastern European languages, Vietnamese, and the pinyin Romanization of Chinese.</translate>
  
==Alternative primary typefaces==
+
<translate>==Alternative Primary Typefaces== <!--T:18--></translate>
 
<translate><!--T:5-->
 
<translate><!--T:5-->
 
Other typefaces can be used when a language isn’t supported by the main primary typeface. These are the preferred typefaces that should be used when Source Sans Pro is unavailable.</translate>
 
Other typefaces can be used when a language isn’t supported by the main primary typeface. These are the preferred typefaces that should be used when Source Sans Pro is unavailable.</translate>
*'''Helvetica:''' Helvetica offers many weights which allow for a lot of design flexibility for all graphic communications.
+
<translate><!--T:19-->
*'''Lato:''' Lato is a sans serif typeface family designed by Łukasz Dziedzic. Lato consists of five weights (plus corresponding italics). Hairline style should not be used.
+
*'''Helvetica:''' Helvetica offers many weights which allow for a lot of design flexibility for all graphic communications.</translate>
 +
<translate><!--T:20-->
 +
*'''Lato:''' Lato is a sans serif typeface family designed by Łukasz Dziedzic. Lato consists of five weights (plus corresponding italics). Hairline style should not be used.</translate>
  
==Secondary typeface==
+
<translate>==Secondary Typeface== <!--T:21--></translate>
The secondary typeface, '''Merriweather''', adds a more formal and confident tone to any graphic, when needed. Merriweather is an open source typeface family designed by Eben Sorkin. It is classified as serif and it was developed to be highly legible both in print and on a screen. The family currently includes 4 weights, from Light to Ultra Bold, in upright and italic styles.
+
<translate><!--T:22-->
*''Tone:'' Confident, formal, serious.
+
The secondary typeface, '''Merriweather''', adds a more formal and confident tone to any graphic, when needed. Merriweather is an open source typeface family designed by Eben Sorkin. It is classified as serif and it was developed to be highly legible both in print and on a screen. The family currently includes 4 weights, from Light to Ultra Bold, in upright and italic styles.</translate>
*''Best used in:'' Body copy and small text.
+
<translate><!--T:23-->
*''Availability:'' The Merriweather family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.
+
*''Tone:'' Confident, formal, serious.</translate>
*''Language support:'' Merriweather supports a limited number of languages.
+
<translate><!--T:24-->
 +
*''Best used in:'' Body copy and small text.</translate>
 +
<translate><!--T:25-->
 +
*''Availability:'' The Merriweather family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.</translate>
 +
<translate><!--T:26-->
 +
*''Language support:'' Merriweather supports a limited number of languages.</translate>
  
 +
<translate>==Alternative Secondary Typefaces== <!--T:27--></translate>
 +
<translate><!--T:28-->
 +
Other typefaces can be used when a language isn’t supported by the main secondary typeface. One of the two typefaces described below should be used when Merriweather is unavailable.</translate>
 +
<translate><!--T:29-->
 +
*'''Georgia:''' Georgia is a transitional serif typeface designed in 1993 by Matthew Carter for Microsoft. Georgia consists of 2 weights (and related italics).</translate>
 +
<translate><!--T:30-->
 +
*'''Libre Baskerville:''' Libre Baskerville is a serif typeface family designed by Impallari Type. Libre Baskerville consists of 2 weights (plus normal italics).</translate>
  
<translate><!--T:6-->
+
<translate>==Joomla! Wordmark Typeface== <!--T:33--></translate>
* For more information on the typography, please see the</translate> '''[http://issuu.com/joomladocs/docs/20150308_joomla_brandmanual_basic_d/1 <translate><!--T:7-->
+
<translate><!--T:34-->
Typeface</translate>]'''
+
The Asenine Wide font used for the Joomla! wordmark is considered a branding typeface associated with the Joomla! name and trademark.</translate>
*'''[https://github.com/adobe-fonts/source-sans-pro <translate><!--T:8-->
+
 
Download Source Sans Pro</translate>]'''
+
<translate><!--T:35-->
 +
The use of this typeface is reserved exclusively for the Joomla! wordmark and the signature. Usage as title font for headings and graphics or in connection with other content are not allowed.</translate>
 +
 
 +
<translate><!--T:36-->
 +
Horizontal version: Asenine wordmark with Joomla! flat brandmark:</translate>
 +
 
 +
[[Image:Horizontal-logo-light-background-tagline-en.png]]
 +
 
 +
<translate><!--T:37-->
 +
*'''Do not use Asenine Wide for your business signature''' [[File:X-mark.png]]: Do not use the typeface to brand your company and your products as Joomla! related products without specific authorization of the Joomla! Project.</translate>
 +
[[Image:Brand-Logo-incorrect-use-1-en.png]][[File:X-mark.png]]
 +
<translate><!--T:38-->
 +
*'''Do not use Asenine Wide in graphics''' [[File:X-mark.png]]: Do not use the typeface for headings and graphics or in connection with other content.</translate>
 +
[[Image:Brand-Logo-incorrect-use-2-en.png]][[File:X-mark.png]]
 +
<translate><!--T:39-->
 +
*'''Use Asenine Wide only on graphics and signatures approved by the Joomla! Project''' [[File:Checkmark.png]]: Use the typeface for project-approved and Joomla-related brand, like JoomlaDay.</translate>
 +
[[Image:Brand-Logo-correct-use-1-en.png]][[File:Checkmark.png]]
 +
 
 +
<div class="row">
 +
<div class="large-6 columns">{{Basic button external|https://github.com/adobe-fonts/source-sans-pro |
 +
<translate><!--T:40-->
 +
Download Source Sans Pro</translate>|class=expand secondary}}</div>
 +
<div class="large-6 columns">{{Basic button external|http://goo.gl/tazMFh |
 +
<translate><!--T:41-->
 +
Download Asenine Wide</translate>|class=expand secondary}}</div>
 +
</div>
  
 
<div class="row">  
 
<div class="row">  
<div class="large-6 columns">{{Basic button|Joomla:Brand_Identity_Elements/Official Logo|<translate><!--T:9-->
+
<div class="large-6 columns">{{Basic button|S:MyLanguage/Joomla:Brand_Identity_Elements/Official Logo|<translate><!--T:9-->
 
Prev: Joomla! Logo</translate>|class=expand success}}</div>
 
Prev: Joomla! Logo</translate>|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|Joomla:Brand_Identity_Elements/Background Usage|<translate><!--T:10-->
+
<div class="large-6 columns">{{Basic button|S:MyLanguage/Joomla:Brand_Identity_Elements/Background Usage|<translate><!--T:10-->
 
Next: Background Usage</translate>|class=expand}}</div>
 
Next: Background Usage</translate>|class=expand}}</div>
 
</div>
 
</div>

Latest revision as of 10:00, 17 April 2017

Other languages:
Bahasa Indonesia • ‎Deutsch • ‎English • ‎Nederlands • ‎Türkçe • ‎español • ‎français • ‎português • ‎português do Brasil
Brand Identity Elements


This is a multiple article series on the basic guidelines for the correct usage of the graphic elements of Joomla’s identity, in order to create high quality, visually stunning communication materials.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (Articles in this series).

The relationship (size, positioning, colours, etc.) of the brand identity elements should never be altered in any way.


Typography

The tagline’s typeface is Source Sans Pro Regular, designed by Paul D. Hunt for Adobe. It is a sans serif typeface intended to work well in user interfaces. Do not use a different typeface other than the one displayed here.

Primary Typeface[edit]

The primary typeface chosen to communicate the Joomla! voice is Source Sans Pro. From body copy to headlines, from print to web, this typeface will cover all design needs. Source Sans Pro is an open source type family designed by Paul D. Hunt. It is classified as sans serif and it was developed to work well both for print and screen usage. The family currently includes six weights, from ExtraLight to Black, in upright and italic styles.

  • Tone: Contemporary, brilliant, friendly.
  • Best used in: Headlines, body copy.
  • Availability: The Source Sans family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.
  • Language support: Because Joomla! is used around the world, we chose a font that supports a wide variety of languages using Latin script, including Western and Eastern European languages, Vietnamese, and the pinyin Romanization of Chinese.

Alternative Primary Typefaces[edit]

Other typefaces can be used when a language isn’t supported by the main primary typeface. These are the preferred typefaces that should be used when Source Sans Pro is unavailable.

  • Helvetica: Helvetica offers many weights which allow for a lot of design flexibility for all graphic communications.
  • Lato: Lato is a sans serif typeface family designed by Łukasz Dziedzic. Lato consists of five weights (plus corresponding italics). Hairline style should not be used.

Secondary Typeface[edit]

The secondary typeface, Merriweather, adds a more formal and confident tone to any graphic, when needed. Merriweather is an open source typeface family designed by Eben Sorkin. It is classified as serif and it was developed to be highly legible both in print and on a screen. The family currently includes 4 weights, from Light to Ultra Bold, in upright and italic styles.

  • Tone: Confident, formal, serious.
  • Best used in: Body copy and small text.
  • Availability: The Merriweather family is available for use on the web via font hosting services including Typekit, WebInk, and Google Web Fonts.
  • Language support: Merriweather supports a limited number of languages.

Alternative Secondary Typefaces[edit]

Other typefaces can be used when a language isn’t supported by the main secondary typeface. One of the two typefaces described below should be used when Merriweather is unavailable.

  • Georgia: Georgia is a transitional serif typeface designed in 1993 by Matthew Carter for Microsoft. Georgia consists of 2 weights (and related italics).
  • Libre Baskerville: Libre Baskerville is a serif typeface family designed by Impallari Type. Libre Baskerville consists of 2 weights (plus normal italics).

Joomla! Wordmark Typeface[edit]

The Asenine Wide font used for the Joomla! wordmark is considered a branding typeface associated with the Joomla! name and trademark.

The use of this typeface is reserved exclusively for the Joomla! wordmark and the signature. Usage as title font for headings and graphics or in connection with other content are not allowed.

Horizontal version: Asenine wordmark with Joomla! flat brandmark:

Horizontal-logo-light-background-tagline-en.png

  • Do not use Asenine Wide for your business signature X-mark.png: Do not use the typeface to brand your company and your products as Joomla! related products without specific authorization of the Joomla! Project.

Brand-Logo-incorrect-use-1-en.pngX-mark.png

  • Do not use Asenine Wide in graphics X-mark.png: Do not use the typeface for headings and graphics or in connection with other content.

Brand-Logo-incorrect-use-2-en.pngX-mark.png

  • Use Asenine Wide only on graphics and signatures approved by the Joomla! Project Checkmark.png: Use the typeface for project-approved and Joomla-related brand, like JoomlaDay.

Brand-Logo-correct-use-1-en.pngCheckmark.png