Showing posts with label Typography. Show all posts
Showing posts with label Typography. Show all posts

Tuesday, April 6, 2010

Arial and Helvetica – what are the real differences?


Many designers like to use Arial and Helvetica in their designs. But do you know what are the real differences between Arial and Helvetica? I remembered I did talk about Helvetica on one of my posts before and mentioned about Arial is a very similar font to Helvetica, but Helvetica is somewhat more refined than Arial, even though each one has the same character width. One of the key differences is the strokes for each character. Helvetica uses primarily vertical or horizontal strokes, while Arial often uses diagonal strokes. 

Above is a diagram showing the differences. Thanks to PULSE for the diagram!

Saturday, January 30, 2010

Helvetica

Helvetica is one of the most popular typefaces in the world. Technically speaking, it's a Sans Serif Grotesque typeface, inspired by and based on the Akzidenz-Grotesk typeface created by Berthold around 1898.

In practical terms, though, it’s used by designers at independent firms, big corporations, and everything in between, from all over the world. Helvetica has been featured by MOMA in New York and has received a number of awards and worldwide recognition. There’s even a documentary and a few books about it.


But why is Helvetica so popular? What is it about this font that seemingly tries to be inconspicuous that has made it such a part of our culture and daily lives?
We see it dozens of times every day, from product logos, to websites, to packaging, and numerous other items. Read on for more information about Helvetica and why you might want to consider it in your next design project.


A Brief History
The original Helvetica was designed in Switzerland in 1957 by Max Miedinger and Eduard Hoffmann at the Haas type foundry (Haas’sche Schriftgiesserei). Haas was controlled by the type foundry Stempel, which was in turn controlled by Linotype.

Helvetica was originally called Die Neue Haas Grotesk, and was closely based on Schelter-Grotesk. It was created specifically to be neutral, to not give any impression or have any meaning in itself. This neutrality was paramount, and based on the idea that type itself should give no meaning. The marketing director at Stempel decided to change the name to Helvetica in 1960 to make the font more marketable internationally. Originally it was proposed that the typeface be called Helvetia (Latin for Switzerland), but the designers didn’t want to name it after a country, and so it was called Helvetica instead (which is Latin for Swiss).


Helvetica Variations
There have been a number of Helvetica variations created, including a number of language variants (Cyrillic, Korean, Hindi, Japanese, Vietnamese, and Greek among them). Others variations include:
  • Helvetica Light was designed at Stempel by artistic director Erich Schultz-Anker and Arthur Ritzel.
  • Helvetica Compressed was designed by Matthew Carter that’s similar to Helvetica Inserat, but with a few differences.
  • Helvetica Textbook is an alternate design with a few different characters.
  • Helvetica Rounded was developed in 1978 and includes rounded stroke terminators. It’s only available in bold and black versions (including condensed and obliques), plus an outline version that wasn’t available digitally.
  • Neue Helvetica was developed in 1983 and has more structurally unified heights and widths among its characters. It also has improved legibility, increased spacing in numbers, and heavier punctuation marks.

Rise In Popularity
Helvetica was designed in post-war Europe, and many companies were looking for a change. It was the opposite of all the kitschy, fancy, decorative typography that covered corporate materials and advertisements.
 
Helvetica’s sleek lines and modern sensibilities were just what companies were looking for to remake their identities and set themselves apart from the past.
Corporations stick by Helvetica because of what they have invested in it. Because of this, it has become associated with corporate culture and business to some degree. This is one reason why American Apparel chose to use the font for their own brand identity to poke fun at corporate culture in America.



Compared to Arial

Arial is a very similar font to Helvetica, and was developed in 1982. To an untrained eye, the differences between the two fonts is almost undetectable. But there are key differences among certain characters, notably G, R, r, t, a, and 3.

Helvetica is somewhat more refined than Arial, even though each one has the same character width.

 
One of the key differences, though, is in the strokes for each character. Helvetica uses primarily vertical or horizontal strokes, while Arial often uses diagonal strokes.



Technical Details of Helvetica
Technically, Helvetica is a very interesting font. There are a few things that set it apart from many other sans serif fonts, and make it unique.
  • Helvetica’s characters always have vertical or horizontal terminations on their strokes, never diagonal.
  • Helvetica is as much about the negative space surrounding the letters than about the lines that make up the characters themselves.
  • The negative space contained within the lowercase “a” closely resembles a teardrop.
  • It has monotone stroke weights.
  • It remains legible when in motion, one reason it’s popular for signage and automaker and airline logos.
On of the best things about Helvetica is its neutrality. It was designed specifically not to give an impression or have any inherent meaning. And because of this, it’s very adaptable to use for different design projects. That’s one reason why it’s been used by everyone from Post-It to American Apparel. It’s also widely seen online, as it’s a web-safe font on Macs.
If you’re looking for a font that rides the line between classic and modern, conservative and edgy, or elegant and relaxed, Helvetica might just be your answer.

Depending on the design elements you include around it, Helvetica can be any or all of those things. Because it’s a sans serif font, it does tend to sway a bit more into the modern category, but it’s simple enough to fit in within a more traditional design.
Helvetica is particularly well-suited to signage and other designs where legibility is key. This is further reinforced by the wide variety of companies that have used the font in their logos or other corporate identity materials (American Apparel, American Airlines, Target, the NYC Subway, etc.).

Another of Helvetica’s main advantages is that it’s a very “safe” font. If you’re unsure of how particular typefaces influence design, Helvetica can be a good fall-back option that will have little impact by itself.

This can be useful to designers who are just getting started or for those studying design. But just remember, because Helvetica is “safe”, you’re unlikely to win any awards for being edgy or daring when you use it, at least not for the typography itself.



Helvetica in the Wild

As already mentioned, Helvetica is used in graphic design and web design all over the place. Below are a few examples of Helvetica in the real world.

The NYC Subway system's signs and map were changed to Heletica in the 1970s by Massimo Vignelli.

U.S. Government forms all use Helvetica.


The commemorative Moleskine notebooks created fro Helvetica.


Target has one of the more recognizble Helvetica logos.

Click here
for more info!

Sunday, October 18, 2009

Neon Style in Photoshop


Damn! I'm so sick these few days. Even now, I'm still not feeling too good. I didn't go to work and just only stay on my bed all the time. I went to visit doctor on Thursday and he said I've got gastroenteritis. Oh! Man! That's why I vomited all the food I ate before. I found that I especially miss my mum and my love during the period of illness. Haha~

I did this tutorial (see above) last week. This is a super easy tutorial to turn your types to neon style in Photoshop. It looks good and realistic. Click here to learn this tutorial if you would like to make your own neon style typo.

Saturday, September 19, 2009

Awesome Milk Typography


What a nice Saturday!? But I don't know why I'm so sleepy all day. So, I spent all the time on my bed. Great! Such a lazy pig!

I did this milk typography tutorial (see above) a week ago, but I just can't find a time to upload it here. It's an incredible and awesome tutorial! Not just milk, you can try some other liquid photos to make this effect. Click here to learn this tutorial.

Saturday, September 12, 2009

Common Typography Mistakes

This post is to help designers to understand the importance of good typography and avoid some common mistakes. Below is a list of common mistakes used in type design or layout that can make a large impact in the effectiveness and appearance of your designs. It's good to avoid making these mistakes in order to save your time and money when dealing with printers. The info and images are provided by TDC. Thanks!


Not Enough Leading

Leading or line spacing can improve the overall readability of large blocks of text on a page, making it easier for readers to follow the lines of text without losing their place. Too little leading or line spacing may cause a cramped feeling. It's important to remember that different fonts need different line spacing. Varying heights in letterforms may demand more or less.


Not Enough Tracking

Tracking or letter spacing is applied to a group of letters. It prevents letters from running into each other, especially during print. It's similar to leading in which it can improve or hinder readability, flow of text and the density or weight of a block of text.


Getting Tracking Confused with Kerning

While tracking is applied to a group of characters, kerning is the adjustment of space between two letter pairs. Effective for headlines, text with ALL CAPS and logo treatments (it helps with readability at various sizes). Don't fall into the trap of letting your design software set this by default; it's character specific. Same applies to the above rules.


Lengthy Lines of Text

Reading many long lines of text causes eye fatigue. Readers are forced to moves their heads and eyes more often from one line to the next. Research states to keep lines of text under 50-60 characters long.


Mixing Too Many Typefaces and Weights

Too many typefaces on one page can become distracting and disconnecting (lacking unity). Try keeping your fonts choices to three or less per project. Too many weights can cause readers to be unclear where the important elements are on the page and create the possibility of readers missing something important.


Not Using Serif Fonts for Lengthy-Text Material

Serif fonts are known to make reading lengthy material, such as books and magazines, more sustainable for longer periods of time. It also helps with eye strain or fatigue, and we all know that we need our eyes! Although this can be argued, serif fonts seem to sit better on the baseline.


Printing Similar Values of Colour on Top of Each Other

For example, try printing a medium blue text on top of a medium brown box. Not just unappealing, but it makes it hard for eyes to read. It also creates a muddy effect.


Reversed Out Text on Less than 50% Tints
Much like the above, this also increases eye strain and hinders readability. The words get lost in the background and typically prints less visible than seen on screen.


Overusing Centered Text

Using centered text creates a jagged and broken appearance to text – very disconnecting! Can be viewed as amateurish in most instances. Save it for those wedding invitations.


Large Body Copy

Normally, designers and non-designers will immediately use 12 point size font for body copy. Smaller font size creates a more professional and modern look. Large body text can be clunky – think about the font size of a children's book. Clunky enough, right?

It's also important to note that viewing text on a computer monitor is much different than printing it. In most instances, type on a screen appears smaller and less crisp. Also, most printers will advise you not to use font size under 7 points due to readability issues.


Not Knowing What the Grid System Is

Understanding the grid is one important thing for a typography enthusiast. It's the basis for creating clarity and making your type and layouts more cohesive. Check out the site, The Grid System, for links and resources pertaining to grid systems.

Monday, August 17, 2009

30 Fonts that All Designers Must Know and Should Own

Here are 30 fonts that every designer must or should own sorted by alphabetical order. There are 15 Serif fonts and 15 Sans Serif fonts. These fonts will help you in your whole working career! The info and images are provided by Just Creative Design.


Adobe Caslon (Serif font)

Magazines, journals, text books and corporate communication.



Adobe Garamond (Serif font)

Textbooks and magazines.


Bembo (Serif font)

Posters, packaging and textbooks.


Bodoni (Serif font)

Headlines, text and logos.


Clarendon (Serif font)

Dictionaries and headlines.



Courier (Serif font)

Tabular materials, technical documentation and word processing.



Excelsior (Serif font)

Newsletters, reports and proposals.



Lucida (Serif font)

Low resolution printing, small point sizes and reversed out half tones.


Minion (Serif font)

Limited edition books, newsletters and packaging.


Perpetua (Serif font)

For displays with fine lettering, long pages of text and chiseled text.



Sabon (Serif font)

Books and corporate communication.


Stempel Schneidler (Serif font)

For displays and fine publications that need a legible text type.


Times New Roman (Serif font)

Newspapers, magazines and corporate communication.


Trajan (Serif font)

Books, magazines, posters, billboards and anything to do with the ages or religion.


Walbaum (Serif font)

Magazines, journals, text books and corporate communication.


Akzidenz Grotesk (Sans-serif font)

Large signage and all purpose for print media.


Avenir (Sans-serif font)

For books with large amounts of text.



Bell Centennial (Sans-serif font)


For listings and very poor printing conditions.



Bell Gothic (Sans-serif font)


For very small amounts of text that contains large amounts of information.



Din (Sans-serif font)


For signage, posters and displays.



Franklin Gothic (Sans-serif font)

Newspapers and where available space is limited.

Frutiger (Sans-serif font)

Large signage and all purpose font for print media.



Futura (Sans-serif font)


Large displays and small text in books.


Gill Sans (Sans-serif font)

Signage and all purpose font for print media.


Helvetica (Sans-serif font)

Large or small text and all purpose type figure.


Meta (Sans-serif font)


Text, number and especially corporate communication.



Myriad (Sans-serif font)


Large displays and all purpose media.



Trade Gothic (Sans-serif font)

Newspaper, classified ads, advertising and multimedia.


Univers (Sans-serif font)

Packaging, signage and text books.


Vag Rounded (Sans-serif font)

Instruction manuals and print advertising.