Legal:Wikimedia trademarks/Word mark creation: Difference between revisions

From Wikimedia Foundation Governance Wiki
Content deleted Content added
JayWalsh (talk | contribs)
→‎Alternative type faces: KACST Office is not used by ar.wiki; +Pak Type Tehreer, suggested by Amir as alternative to Amiri, now used for several Arabic logos
(14 intermediate revisions by 8 users not shown)
Line 1: Line 1:
==Wikipedia puzzle globe and wordmark localization guide==
== Wikipedia puzzle globe and wordmark localization guide ==

'''This guide is intended for project volunteers who wish to construct localized versions of the new Wikipedia puzzle globe and wordmark combination, specifically to replace previous versions on all language editions of Wikipedia.'''
'''This guide is intended for project volunteers who wish to construct localized versions of the new Wikipedia puzzle globe and wordmark combination, specifically to replace previous versions on all language editions of Wikipedia.'''


[[File:Wikipedia-logo-v2-en_SVG.svg|right|thumb|250px|The official English Wikipedia puzzle globe and wordmark]]Following the introduction of the [[Wikimedia_official_marks | revised Wikipedia puzzle globe]], the Foundation's usability team revisited the construction of localized versions of the Wikipedia wordmark (the stylized version of the word Wikipedia (with upper case W and A, and the tagline underneath the wordmark: "The free encyclopedia."
[[File:Wikipedia-logo-v2-en.svg|right|thumb|250px|The official English Wikipedia puzzle globe and wordmark]]
Following the introduction of the [[Wikimedia official marks|revised Wikipedia puzzle globe]], the Foundation's usability team revisited the construction of localized versions of the Wikipedia wordmark (the stylized version of the word Wikipedia with upper case W and A, and the tagline underneath the wordmark: "The free encyclopedia.")


Together, the wordmark and puzzle globe form the most visible brand identifier for Wikipedia in all of our languages.
Together, the wordmark and puzzle globe form the most visible brand identifier for Wikipedia in all of our languages.


In order to facilitate localization of the wordmark across hundreds of different languages, including dozens of character set varieties, the usability team introduced the use of the open source typeface [[en:Linux_Libertine|Linux Libertine]] to replace the proprietary typeface Hoeffler for low-resolution, screen-based implementations of the Wikipedia wordmark. New customizations of the Wikipedia wordmark and puzzle globe can be stored on the Wikimedia Commons, where they will be permanently stored and used in the standard Wikipedia style sheet.
In order to facilitate localization of the wordmark across hundreds of different languages, including dozens of character set varieties, the usability team introduced the use of the free software typeface [[:en:Linux Libertine|Linux Libertine]] to replace the proprietary typeface Hoeffler for low-resolution, screen-based implementations of the Wikipedia wordmark. New customizations of the Wikipedia wordmark and puzzle globe can be stored on the Wikimedia Commons, where they will be permanently stored and used in the standard Wikipedia style sheet.


Volunteers and project contributors who wish to construct localized, non-English versions of the Wikipedia wordmark and puzzle globe can use this guide to construct localized versions of the Wikipedia puzzle globe and wordmark for use on different language editions of Wikipedia.
Volunteers and project contributors who wish to construct localized, non-English versions of the Wikipedia wordmark and puzzle globe can use this guide to construct localized versions of the Wikipedia puzzle globe and wordmark for use on different language editions of Wikipedia.


A full gallery of all variations of the Wikipedia wordmark, in both PNG and SVG formats can be found on the [http://commons.wikimedia.org/wiki/Wikipedia/2.0 Wikimedia Commons.]
A full gallery of all variations of the Wikipedia wordmark, in both PNG and SVG formats can be found on the [[commons:Wikipedia/2.0|Wikimedia Commons]].


==Getting started==
== Getting started ==
===Use blueprint file===
=== Use blueprint file ===
Use this blueprint SVG file to construct localized versions of the mark:
Use this blueprint SVG file to construct localized versions of the mark:
[[File:Wikipedia-logo-v2-blueprint.svg| Wikipedia-logo-v2-blueprint_SVG.svg]]
[[File:Wikipedia-logo-v2-en.svg]]


===The type face: Linux Libertine===
=== The type face: Linux Libertine ===
The official type face for creating localized versions of the Wikipedia wordmark is Linux Libertine.
The official type face for creating localized versions of the Wikipedia wordmark is Linux Libertine.
* Visit its page on Wikipedia for information about the type face: [http://en.wikipedia.org/wiki/Linux_Libertine Linux Libertine on Wikipedia]
* Visit its page on Wikipedia for information about the type face: [[w:Linux Libertine|Linux Libertine on Wikipedia]]
* Download the font-file [[File:LinLibertineO 473.zip]] (you will need to unzip and install the font)
* Download the font-file [[:File:LinLibertineO 473.zip]] (you will need to unzip and install the font)
* '''IMPORTANT:''' Only use the font version: "LinLibertine_Re-4.7.3.otf"
* '''IMPORTANT:''' Only use the font version: "LinLibertine_Re-4.7.3.otf", since this is slightly modified especially for us!
:(since this is slighty modified espacially for us!)


===Alternative type faces===
=== Alternative type faces ===
If LinuxLibertine does not support your language, a different OpenSource font has to be used. We recommend:
If LinuxLibertine does not support your language, a different free software font has to be used. We recommend:
* Chinese: [http://www.freedesktop.org/wiki/Software/CJKUnifonts/Download| AR PL UMing]
* Chinese: [http://www.freedesktop.org/wiki/Software/CJKUnifonts/Download AR PL UMing]
* Arabic: [http://cooltext.com/Download-Font-Kacst+Office| KACST Office]
* Arabic: [http://cooltext.com/Download-Font-Kacst+Office KACST Office] (sometimes used instead: Pak Type Tehreer)
* Devanagari: [http://madanpuraskar.org/index.php?option=com_docman&task=cat_view&gid=19&Itemid=63| Kalimati]
* Devanagari: [http://madanpuraskar.org/index.php?option=com_docman&task=cat_view&gid=19&Itemid=63 Kalimati]


===Software===
=== Software ===
You can use [http://www.inkscape.org/download/ Inkscape], the opensource illustration software to create the new puzzle globe and wordmark file and [http://www.gimp.org/| Gimp] to create a PNG-file.<br />
You can use [http://www.inkscape.org/download/ Inkscape], the free software illustration software to create the new puzzle globe and wordmark file and [http://www.gimp.org/ Gimp] to create a PNG-file.


==Wikipedia wordmark creation grid==
== Wikipedia wordmark creation grid ==
Use the grid below to precisely position the localized variants of the Wikipedia workdmark and the "Free encyclopedia" tagline underneath. (this grid is included in the blueprint file)
Use the grid below to precisely position the localized variants of the Wikipedia wordmark and the "Free encyclopedia" tagline underneath (this grid is included in the blueprint file).
[[File:Wikipedia-logo-v2 grid guideline.jpg|center|500px]]
[[File:Wikipedia-logo-v2 grid guideline.jpg|center|500px]]
Dimensions for the creation of the puzzle globe and wordmark are clearly marked on the accompanying grid.
Dimensions for the creation of the puzzle globe and wordmark are clearly marked on the accompanying grid.
Line 41: Line 40:
* Don't change the globe: please maintain its dimension and position.
* Don't change the globe: please maintain its dimension and position.


===The Wordmark===
=== Wordmark ===
[[File:Wikipedia-logo-v2-HowTo-25.jpg| thumb| 400px| This is the stylized Wikipedia W]]
[[File:Wikipedia-logo-v2-HowTo-25.jpg|thumb|400px|This is the stylized Wikipedia W]]
* The "W" in the Wikipedia wordmark is a customized "W" character, known as the "stylized Wikipedia W." It is not a standard, LinLibertine O "W" character.
* The "W" in the Wikipedia wordmark is a customized "W" character, known as the "stylized Wikipedia W." It is not a standard, LinLibertine O "W" character.
* When a "W" appears as the first character of the Wikipedia wordmark, it must use the stylized Wikipedia "W". See [[Wikimedia official marks/Word mark creation/howto_W| this page]] for an explaination of how to insert it.
* When a "W" appears as the first character of the Wikipedia wordmark, it must use the stylized Wikipedia "W". See [[Wikimedia official marks/Word mark creation/howto W|this page]] for an explanation of how to insert it.
* The main '''WikipediA''' wordmark typeface height is 27pt in LinLibertine O.
* The main '''WikipediA''' wordmark typeface height is 27pt in LinLibertine O.
* The first and last characters of the 'WikipediA' wordmark must use upper-case characters.
* The first and last characters of the 'WikipediA' wordmark must use upper-case characters.
* Everything in between must use small-caps characters. See [[Wikimedia official marks/Word mark creation/howto_smallcapps| this page]] for detailed instructions.
* Everything in between must use small-caps characters. See [[Wikimedia official marks/Word mark creation/howto smallcapps|this page]] for detailed instructions.
* In all cases the typeface should appear as 100% black.
* In all cases the typeface should appear as 100% black.
* If you have changed one or some letters of the word "WikipediA", please maintain its kerning-values. See [[Wikimedia official marks/Word mark creation/howto_kerning| this page]] for detailed instructions.
* If you have changed one or some letters of the word "WikipediA", please maintain its kerning-values. See [[Wikimedia official marks/Word mark creation/howto kerning|this page]] for detailed instructions.


====The Wordmark does not fit====
==== Wordmark does not fit ====
In some cases the localized wordmark does not fit into the textfield (which is 119px wide).
In some cases the localized wordmark does not fit into the textfield (which is 119px wide).
It might be:
It might be:
* Too long, so it cannot be displayed completly. See [[Wikimedia official marks/Word mark creation/howto_toolong| this page]] for an explaination of how to fix that.
* Too long, so it cannot be displayed completely. See [[Wikimedia official marks/Word mark creation/howto toolong|this page]] for an explanation of how to fix that.
* Too short, so the spacing between the letters becomes too big. See [[Wikimedia official marks/Word mark creation/howto_tooshort| this page]] for an explaination of how to fix that.
* Too short, so the spacing between the letters becomes too big. See [[Wikimedia official marks/Word mark creation/howto tooshort|this page]] for an explanation of how to fix that.


===The Tagline===
=== Tagline ===
[[File:Wikipedia-logo-v2-HowTo-23.jpg| thumb| wordmark and tagline]]
[[File:Wikipedia-logo-v2-HowTo-23.jpg|thumb|wordmark and tagline]]
* The main tagline '''The free Encyclopedia''' text uses '''non italicized''' 13pt LinLibertine typeface.
* The main tagline '''The free Encyclopedia''' text uses '''non-italicized''' (except for Cyrillic text, see below) 13pt LinLibertine typeface.
* Cyrillic text ''should be'' italicized because of the improved readability and design of italic text. Also 13pt LinLibertine.
* The tagline should fit full width below the wordmark. Therefor you should use the textfield of the blueprint file (which is 119px wide, and fully justified).
* The tagline should fit full width below the wordmark. Therefore you should use the textfield of the blueprint file (which is 119px wide, and fully justified).
====The Tagline does not fit====

==== Tagline does not fit ====
In some cases the localized tagline does not fit, because it is either:
In some cases the localized tagline does not fit, because it is either:
* Too long, so the text breaks into another line. See [[Wikimedia official marks/Word mark creation/howto_tagline_toolong| this page]] for how to fix that.
* Too long, so the text breaks into another line. See [[Wikimedia official marks/Word mark creation/howto tagline toolong|this page]] for how to fix that.
* Too short, so ugly gaps between the words appear. See [[Wikimedia official marks/Word mark creation/howto_tagline_tooshort| this page]] for how to fix that.
* Too short, so ugly gaps between the words appear. See [[Wikimedia official marks/Word mark creation/howto tagline tooshort|this page]] for how to fix that.

{{clear}}
{{clear}}


==Preparing files for upload==
== Preparing files for upload ==
===Creating a PNG===
=== Creating a PNG ===
We recommend to use Gimp or another graphic production package (Photoshop etc), since the png quality uses to better using Gimp/Photoshop than with Inkscape/Illustrator.
We recommend to use Gimp or another graphic production package (Photoshop etc.), since the png quality uses to better using Gimp/Photoshop than with Inkscape/Illustrator.

'''1. Create a new file with these preferences:'''
* width: 135px
* height: 155px
* resolution 72 dpi
* color mode: RGB
* under '''color profile,''' or a similar setting, chose 'no color management'

'''2. Insert the logo from Inkscape or another illustration program:'''
* copy the objects from Inkscape and paste them into the newly-created file in the graphics program
* with photoshop you'll get good results when you insert it as a "smart object"


#'''Create a new file with these preferences:'''
'''3. Position:'''
#* width: 135px
* Position the object with respect to the grid
#* height: 155px
(Usually this means: X-position is: 68px and the Y-position is 100px)
#* resolution 72 dpi
* The distance between bottom of the file and baseline of the desciptor has to be 4px. (Keep this in mind if you have changed the fontsize of the descriptor)
#* color mode: RGB
* Ensure the background information (white or other color) are deleted, since we need a png-file with transparent background.
#* under '''color profile,''' or a similar setting, chose 'no color management'
#'''Insert the logo from Inkscape or another illustration program:'''
#* copy the objects from Inkscape and paste them into the newly-created file in the graphics program
#* with Photoshop you'll get good results when you insert it as a "smart object"
#'''Position:'''
#* Position the object with respect to the grid
#: (Usually this means: X-position is: 68px and the Y-position is 100px)
#* The distance between bottom of the file and baseline of the descriptor has to be 4px.
#: (Keep this in mind if you have changed the fontsize of the descriptor)
#* Ensure the background information (white or other color) are deleted, since we need a png-file with transparent background.
#'''Save your file as a PNG:'''
#* In Photoshop, click on "Save for web"
#: (Top Navigation: "File": "Save for web")
#* In Gimp or other programs look for a web-friendly format.
#* Choose png-24
#* Make sure "transparency" is checked
#* Name your file like this: "Wikipedia-logo-v2-" + language Code
#: (For example in the ''Slovak Wikipedia'': "Wikipedia-logo-v2-sk")
#* Upload the PNG format to the Wikimedia Commons [[commons:Wikipedia/2.0|logo gallery]]


=== Creating a SVG ===
'''4. Save your file as a PNG:'''
Use Inkscape or Illustrator.
* In Photoshop, click on "Save for web" (Top Navigation: "File": "Save for Web")
#'''Save the file as SVG'''
* In Gimp or other programs look for a web-friendly format.
#* In Inkscape and Illustrator: "Top Navigation": "File": "Save as"
* Choose png-24
#'''Use this setting'''
* Make sure "transparency" is checked
#* Inkscape: "Inkscape SVG"
* Name your file like this: "Wikipedia-logo-v2-" + language Code
#* Illustrator: "SVG 1.1" and "Text: Convert into path"
** For example (for slovak Wikipedia) "Wikipedia-logo-v2-sk"
* Upload the PNG format to the Wikimedia Commons [http://commons.wikimedia.org/wiki/Wikipedia/2.0 logo gallery]


[[Category:Wikimedia visual identity]]
===Creating an SVG===
'''Use Inkscape or Illustrator.'''<br />
'''1.Save the file as SVG'''
In Inkscape and Illustrator: "Top Navigation": "File": "Save as"<br />
'''2. Use this setting'''
Inkscape: "Inkscape SVG"
Illustrator: "SVG 1.1" and "Text: Convert into path"

Revision as of 09:10, 29 March 2013

Wikipedia puzzle globe and wordmark localization guide

This guide is intended for project volunteers who wish to construct localized versions of the new Wikipedia puzzle globe and wordmark combination, specifically to replace previous versions on all language editions of Wikipedia.

The official English Wikipedia puzzle globe and wordmark

Following the introduction of the revised Wikipedia puzzle globe, the Foundation's usability team revisited the construction of localized versions of the Wikipedia wordmark (the stylized version of the word Wikipedia with upper case W and A, and the tagline underneath the wordmark: "The free encyclopedia.")

Together, the wordmark and puzzle globe form the most visible brand identifier for Wikipedia in all of our languages.

In order to facilitate localization of the wordmark across hundreds of different languages, including dozens of character set varieties, the usability team introduced the use of the free software typeface Linux Libertine to replace the proprietary typeface Hoeffler for low-resolution, screen-based implementations of the Wikipedia wordmark. New customizations of the Wikipedia wordmark and puzzle globe can be stored on the Wikimedia Commons, where they will be permanently stored and used in the standard Wikipedia style sheet.

Volunteers and project contributors who wish to construct localized, non-English versions of the Wikipedia wordmark and puzzle globe can use this guide to construct localized versions of the Wikipedia puzzle globe and wordmark for use on different language editions of Wikipedia.

A full gallery of all variations of the Wikipedia wordmark, in both PNG and SVG formats can be found on the Wikimedia Commons.

Getting started

Use blueprint file

Use this blueprint SVG file to construct localized versions of the mark:

The type face: Linux Libertine

The official type face for creating localized versions of the Wikipedia wordmark is Linux Libertine.

  • Visit its page on Wikipedia for information about the type face: Linux Libertine on Wikipedia
  • Download the font-file File:LinLibertineO 473.zip (you will need to unzip and install the font)
  • IMPORTANT: Only use the font version: "LinLibertine_Re-4.7.3.otf", since this is slightly modified especially for us!

Alternative type faces

If LinuxLibertine does not support your language, a different free software font has to be used. We recommend:

Software

You can use Inkscape, the free software illustration software to create the new puzzle globe and wordmark file and Gimp to create a PNG-file.

Wikipedia wordmark creation grid

Use the grid below to precisely position the localized variants of the Wikipedia wordmark and the "Free encyclopedia" tagline underneath (this grid is included in the blueprint file).

Dimensions for the creation of the puzzle globe and wordmark are clearly marked on the accompanying grid.

  • Text should not appear outside of these dimensions or limits.
  • Don't change the globe: please maintain its dimension and position.

Wordmark

This is the stylized Wikipedia W
  • The "W" in the Wikipedia wordmark is a customized "W" character, known as the "stylized Wikipedia W." It is not a standard, LinLibertine O "W" character.
  • When a "W" appears as the first character of the Wikipedia wordmark, it must use the stylized Wikipedia "W". See this page for an explanation of how to insert it.
  • The main WikipediA wordmark typeface height is 27pt in LinLibertine O.
  • The first and last characters of the 'WikipediA' wordmark must use upper-case characters.
  • Everything in between must use small-caps characters. See this page for detailed instructions.
  • In all cases the typeface should appear as 100% black.
  • If you have changed one or some letters of the word "WikipediA", please maintain its kerning-values. See this page for detailed instructions.

Wordmark does not fit

In some cases the localized wordmark does not fit into the textfield (which is 119px wide). It might be:

  • Too long, so it cannot be displayed completely. See this page for an explanation of how to fix that.
  • Too short, so the spacing between the letters becomes too big. See this page for an explanation of how to fix that.

Tagline

wordmark and tagline
  • The main tagline The free Encyclopedia text uses non-italicized (except for Cyrillic text, see below) 13pt LinLibertine typeface.
  • Cyrillic text should be italicized because of the improved readability and design of italic text. Also 13pt LinLibertine.
  • The tagline should fit full width below the wordmark. Therefore you should use the textfield of the blueprint file (which is 119px wide, and fully justified).

Tagline does not fit

In some cases the localized tagline does not fit, because it is either:

  • Too long, so the text breaks into another line. See this page for how to fix that.
  • Too short, so ugly gaps between the words appear. See this page for how to fix that.

Preparing files for upload

Creating a PNG

We recommend to use Gimp or another graphic production package (Photoshop etc.), since the png quality uses to better using Gimp/Photoshop than with Inkscape/Illustrator.

  1. Create a new file with these preferences:
    • width: 135px
    • height: 155px
    • resolution 72 dpi
    • color mode: RGB
    • under color profile, or a similar setting, chose 'no color management'
  2. Insert the logo from Inkscape or another illustration program:
    • copy the objects from Inkscape and paste them into the newly-created file in the graphics program
    • with Photoshop you'll get good results when you insert it as a "smart object"
  3. Position:
    • Position the object with respect to the grid
    (Usually this means: X-position is: 68px and the Y-position is 100px)
    • The distance between bottom of the file and baseline of the descriptor has to be 4px.
    (Keep this in mind if you have changed the fontsize of the descriptor)
    • Ensure the background information (white or other color) are deleted, since we need a png-file with transparent background.
  4. Save your file as a PNG:
    • In Photoshop, click on "Save for web"
    (Top Navigation: "File": "Save for web")
    • In Gimp or other programs look for a web-friendly format.
    • Choose png-24
    • Make sure "transparency" is checked
    • Name your file like this: "Wikipedia-logo-v2-" + language Code
    (For example in the Slovak Wikipedia: "Wikipedia-logo-v2-sk")

Creating a SVG

Use Inkscape or Illustrator.

  1. Save the file as SVG
    • In Inkscape and Illustrator: "Top Navigation": "File": "Save as"
  2. Use this setting
    • Inkscape: "Inkscape SVG"
    • Illustrator: "SVG 1.1" and "Text: Convert into path"