Deviant Login Shop  Join deviantART for FREE Take the Tour
×

More from deviantART



Details

Submitted on
November 8, 2012
Link
Thumb

Stats

Views
2,438
Favourites
17 (who?)
Comments
7
×

Design tips: Typography

Journal Entry: Thu Nov 8, 2012, 3:15 PM
:bulletorange: Avoid the use of the font Optima, particularly for luxury or similarly "fancy" types of clients. It looks generally dated and plain.

:bulletorange: Try not to pair different sans-serif fonts (ex: Arial and Helvetica), but if you do, do not use fonts that are similar. The key is to use fonts that are distinctly different, such as a condensed sans for headlines and regular sans like Helvetica or Verdana for subheads or body copy. If you use two that are similar, it will look like you mistakenly didn't update all your text with the same font.

:bulletorange: If you want to pair a serif font with a sans-serif or vice versa, there are 3 options you should use to make your decisions:
1) Select fonts made by the same typographer, or
2) Select fonts made around the same time period, or
3) Select fonts with similarly shaped characters

(Note: The reason why the rules may be different between pairing serif/sans-serif fonts and pairing two sans-serif fonts is that serif fonts have extra visual accents that make them clearly different from their sans-serif counterparts, even if they have a similar shape. With sans-serifs, you must pair two very different font faces to obtain a similar distinctive visual separation. The same applies to pairing two serif fonts.)

:bulletorange: Don't try to make a finished design every time you start something. If you come up with a new idea in the middle of designing, do a Save As and keep your current design as a variation, then go working on your other idea. Do this every time you get a new idea and you will have a lot of different options to choose from. The worst thing you can do for yourself is end up with only 1 or 2 designs to choose from and no options to consider. Sometimes when you think a single design is the best route, it turns out not as good as you thought when you look at the finished design. When you make variations, you at least have something to compare to and come up with better ideas or combinations.

:bulletorange: Print out everything. Even if it's a web site design. Print out your variations and look at them on a table where you can see the whole layout to scale. If it's a print piece, like a magazine or business card, you should always print it out. The most common mistake designers make is to design only with their computer and not to real life scale. What may look good on your computer may turn out huge or tiny, thick or thin, wide or tight when it comes to the actual printed piece.

:bulletorange: Always kern big display type. You might be asking, "What is kerning?". Kerning is adjusting the space between 2 letters. Do not confuse this with Tracking. Tracking is the overall horizontal spacing of a word or sentence.

Kerning: Han dg loves VS Handgloves
Tracking: H a n d g l o v e s VS Handgloves

Why kern big type? Because spacing between letters forms clear, comfortably read words and is an exact science. However, it is not something that a computer can magically do all on it's own. By using Optical kerning in programs like Photoshop and Illustrator, the program will bring letters into better alignment, but it still needs help from time to time and that's where you must come in. A Kerning Game
This is also another reason why you should always do printouts to analyze, which brings me to the next point:

:bulletorange: Check kerning on big type by turning it upside down and stepping back. The hard part about identifying bad character spacing between letters is that you know what the word says. When you turn the type upside down, it's no longer a word to you. You can look at the shapes of the characters and the spaces between them more clearly.

:bulletorange: The smaller the type, the greater the tracking. To give you a good idea, 12-14pt type is generally without any tracking (e.g. Helvetica or Garamond). 7-9pt type will be between 15-30pt tracking, depending on the font. Again, do printouts to see if the text can be clearly read based on size and tracking/kerning.

:bulletorange: For print, unless you are writing a term paper, 12pt type is too big for body text. Ideal body text for printed pieces is between 7-9pt. A good example of this can be seen in just about any novel or magazine.

:bulletorange: IMO, the ideal line length of a sentence is 65 characters. The minimum is 35 and the max is 75. These numbers/rules sometimes vary from one designer to another, but this is really just an average. Some may say a wider or shorter range is acceptable or that the ideal length is more or less than 65. Use your best judgement.

:bulletorange: If you have a lot of text in short lines, the reader has to constantly jump their eyes around, which causes fatigue and also doesn't leave you enough room for good rags if you are using left- or right-justified text. If you have a lot of text in really long lines, it's hard for readers to find their place when they have to jump back to the beginning of the next line. This also typically creates weird shapes along your rags. If you keep to as close to the ideal  characters as you can, you will end up with easy to follow lines of text and nice, non-distracting rags. Keep in mind that these are only guidelines. In a case where you have only 1-3 lines of text, it's okay to go shorter or longer with the lines.

:bulletorange: Always consider the location and distance your designs will be seen. If you are doing a print piece, like a magazine, you'll want some big bold headlines to grab people's attention, but small type for your body copy so that you can fill up the pages with article information. If you are doing a billboard, your type will need to be big enough to be seen from a long distance. When things are seen from far away, you will need to increase the tracking (+#) so it can be read easier. If you keep the tracking/kerning tight and a person is standing 100ft away, the letters will look like they're connected together. If a person is meant to read something up close, like a business card, then you can decrease the tracking (-#).

:bulletorange: Don't leave leading to Auto when you set paragraphs. Set it yourself.  It is best to experiment first with the leading space between lines and paragraphs to see which is easiest to read. If you leave leading on Auto and write out some large type, you'll always find that the leading is way too big and you'll have giant gaps between each line of text. As a general guideline, when you get to around 30pt type and above, the leading should get to about the same 30pt and increase at a slightly smaller weight (e.g. 42pt type/40pt leading, 56pt type/48pt leading). Depending on your font choices, the type may be the same size, but the leading may be different from one design to another.

:bulletorange: There are several degrees of type every designer should be aware of and use:
Display/Headline: This is the largest type you would use in your designs. These are for headlines, such as the headline of a newspaper article or a big tagline on a poster. As a rule of thumb, your headlines should be at least 4pts larger than your body text size.
Subhead: This is the second largest type that is used as secondary or introductory text to support headlines. You can also use this for quotes in the middle of body text. As a rule of thumb, your subheads should be at least 2pts larger than your body text size.
Body: This is your normal body text. The size you use for your long sections of text, such as a full newspaper article.
Small: Small type should be no taller than the x-height of your body text. The x-height is the height from the baseline of your text to the top of the smallest letters (e.g. the distance from the bottom to top of the letter "a"). Small type is typically used for photo captions, source information in a footer, and other small pieces of information like the name of a person being quoted.
Mouse: This is the smallest type you would use. Mouse type, like Small type, is typically based on the x-height of the next largest size type. For example, if your small type was 6pt, your mouse type would be around 4.5pt. Mouse type is often used for small garnishes of information, like the title of a book placed at bottom of each page or legal disclaimers on packaging. Single words or very short sentences in this size type requires heavily increased tracking (+50 to over +100) in order to be legible in most cases. Sentences in this type still require increased tracking, but not as much (e.g. the ingredient list that must fit on a small package) because they are either meant to be read up close or to be less noticeable.

The largest mistake you can do is not have enough variety of sizes of type and/or color to give your text hierarchy and visual appeal. Don't be afraid to use big headlines, big captions, or tiny callouts.

Add a Comment:
 
:iconmartinsilvertant:
MartinSilvertant Featured By Owner Dec 3, 2012  Professional General Artist
There are some points I disagree with or which I find a bit incomplete but in general it's a nice article with some good tips.
Reply
:iconstoneangel3:
stoneangel3 Featured By Owner Nov 10, 2012
Some great tips here.
Reply
:iconmiontre:
miontre Featured By Owner Nov 8, 2012  Hobbyist Photographer
Great journal!
Reply
:iconpianof:
pianof Featured By Owner Nov 8, 2012
Yay kerning game. Question: how much should one manually kern?
Reply
:iconpianof:
pianof Featured By Owner Nov 8, 2012
Let me rephrase that: in the game, there's a set distance for the end letters. How do you figure that out? How much should one kern before it's enough? Or is it an essay thing, where we leave it and come back later?
Reply
:iconnokari:
nokari Featured By Owner Nov 8, 2012  Professional Interface Designer
Another thing you can do is step back and really squint your eyes until everything is blurry. If you see dark spots or light spots in your text, the dark spots need to be spaced out more and the light spots need to be brought closer. One thing to avoid is letting characters touch. If the only way to get the kerning right is for two letters to touch, then you either need to figure a way to cut a piece of one of the letters where they touch, connect them like a ligature, or increase the spacing of the other letters instead.
Reply
:iconnokari:
nokari Featured By Owner Nov 8, 2012  Professional Interface Designer
You can certainly leave and come back to reevaluate your text with fresh eyes.

Kerning in general is very difficult, because it's based on the physical voids inside and between letters. Most of these were figured out long ago with calligraphy and you can find some charts and other articles online about deciding what is proper kerning. I have a chart from a calligraphy course I took a few years ago, but it's on paper.
Essentially, it's an experiment and it can get pretty complicated to explain. You have to practice over and over to get the feeling for what is proper kerning. You can get a better sense by studying articles and looking at other examples.
Reply
Add a Comment: