Friday, January 31, 2014

FIFA World Cup 2014 Adidas Jersey Font

Adidas is providing the kits for Argentina, Bosnia and Herzegovina, Colombia, Germany, Japan, Mexico, Nigeria, Russia, Spain and Sweden. Adidas used a single font on the jersey of all their sponsored teams during the 2010 World Cup and that practice will continue for the World Cup 2014. 



The font contains 160 characters which includes two sets of numbers (shadow and foreground); all the letters, including accents, in the Latin-1 codepage; and, several punctuations and symbols. The font is available in both Open Type and True Type font formats. 

This font uses two characters to simulate the 3D effect in the original design. The instructions on how to do this is found here.

A preview font, in both OTF and TTF, with very limited glyph set is available for download to give you a chance to test the font. The instructions on how to get the full font is indicated in the copyright field of the preview font and in a text file included in the preview font download pack.

Download the preview font here.

Click on the SKIP AD button when you get to the linked page. The button is shown, after a short delay, near the upper right corner of the page. A click on the SKIP AD button starts the font download.

Hope you like my font.

How to use the numbers in the Adidas World Cup 2014 font

The shadows in the numbers of Adidas font could not be implemented as is in a digital font. The shadows can be implemented only if two sets of numbers are used and the Adidas World Cup 2014 font has that. One set for the shadows is in the number positions [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ] and another set for the foreground is in the Shift - number positions [ !, @, #, $, %, ^, &, *, (, ) ]. One set of number is superimposed over the other set to create the 3D effect. 



These can be implemented in two ways - using layers and using kerning. However, this could not be done in all programs but most graphic programs support at least one of the two methods.

Using layers

Layers is supported by most graphics programs and this is the simplest way to do this. This is a cinch in Photoshop.


For example, you wanted to make 2014 in red with blue shadows and here's how to do it:


- Set the text color for your shadow and type the numbers using the number keys. In our example, set the color to blue then type 2 0 1 4.




- Create a new layer on top of that first layer. Set the text color and type the same number but use the number in the Shift-number position. In our example, set text color to red, then press the Shift key and type 2 0 1 4 (or @ ) ! $ keys)



- If numbers in the two layers are not properly aligned, center align the two layers horizontally and vertically.




Using kerning

Kerning is the information stored in the font that programs use to adjust the distance between two specific characters. However, not all programs support kerning. For programs that support kerning, it is implemented automatically. 

- Set the text color for the shadow, type the number you want, set the text color for the foreground, press the Shift key and press the same number key. If there is a need to do more numbers, just repeat the process. For example, in our 2014 example, set text color to blue, type 2, set color to red, press the Shift key and type 2. Repeat for process for 0, 1 and 4. 

- Another way to approach this is to insert a space between the number and shift-number pairs. Set the appropriate colors and then delete the space characters. If your program uses the font's kerning data, the two characters will automatically align.