Wikimedia official marks/Word mark creation

From the Wikimedia Foundation
< Wikimedia official marks
Revision as of 17:03, 21 July 2010 by Amire80 (talk | contribs) (therefor -> therefore, in the sense of "for that reason")

Jump to: navigation, search

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: Wikipedia-logo-v2-en.svg

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).

Wikipedia-logo-v2 grid guideline.jpg

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 (for Slovak Wikipedia) "Wikipedia-logo-v2-sk"
  • Upload the PNG format to the Wikimedia Commons logo gallery

Creating an 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"