Darker Fonts and Better Contrast Using Adobe Reader –

How to choose darker fonts for better contrast and sharper texts using Adobe Reader.

1. Click the Start button and select "All Programs." Select "Adobe Reader" from the menu items.

2. Click the "Edit" button on the top of the main Adobe Reader screen. From this menu, select "Preferences." This opens a dialog box where you can set preferences for the reader, including font color.

3. Click the "Accessibility" icon on the left of the preferences window. In this window, mark the check box "Replace document colors" in the list of options. Click the "Custom color" button. This opens a new dialog box.

4. Choose a darker font color, such as black or navy blue. Press the "OK" button to confirm your changes. The font colors will change the next time you open an Adobe Reader document

Please find the file attached with information on most suitable fonts that can be used to create a good publication. Also attached is a recent article from Smash Magazine that also addresses fonts, font size, font color, contrasts. The approach to publishing to the web vs. print brings opportunities in how to enhance a digital document vs. a traditional print document.

(Attachment ‐ Recommended fonts & Type Considerations)

Recommended Fonts.

1. Helvetica

Without a doubt, Helvetica is the most heavily used font by professionals (and also by the not so professional) in graphic design. Although some praise the font, many believe that it is spaced too tightly. And as Vivien pleas in her 16 most overused fonts article, “Understand that you can’t always rely on Helvetica to illustrate and deliver your every message. Helvetica is not perfect for everyone and every occasion.”

2. Trajan

Trajan finds its way into many Hollywood movie posters and anything remotely to do with religion, law, marriage, class or the past. You can check out the flickr pool for more uses of Trajan. A bit of history on the font Trajan… Trajan is an old style serif typeface designed in 1989 by Carol Twombly for Adobe. The design is based on Roman square capitals, as used for the inscription at the base of Trajan’s Column from which the typeface takes its name. 3. Garamond

Although there are many versions of Garamond, the most used version today is the Adobe Garamond version (as seen above) released in 1989. Garamond is a great font for magazines, textbooks, websites and long bodies of text and was recently named the second best font (after Helvetica) by a German publication.

4. Futura

Futura is a font that comes up often in large displays, logos, corporate typefaces and in books where small text is needed. It is based on geometric shapes (near-perfect circles, triangles and squares) which became representative of the Bauhaus design style of 1919-1933. Futura has an appearance of efficiency and forwardness. Some do hate the font though.

5. Bodoni

Bodoni is a great font for headlines, decorative text and logos. Bodoni has a narrow underlying structure with flat, unbracketed serifs. The face has extreme contrast between thick and thin strokes, and an overall geometric construction which makes it a very aesthetic looking font.

6. Bickham Script Pro

Used mainly for formal occasions, Bickham Script Pro is a font which does the job well… Cameron Moll even recommended it in his article “Typefaces no one will get fired for using.” The ‘not-so-trained’ designer usually vouches for Vivaldi instead which is one of America’s most hated fonts. Another great alternative would be Sloop.

7. Frutiger

The Frutiger font family is neither strictly geometric nor humanistic in construction; its forms are designed so that each individual character is quickly and easily recognised. Such distinctness makes it good for signage and display work and it is often used in Web 2.0 Logos. The full family has a warmth and subtlety that have, in recent years, made it popular for the smaller scale of body text in magazines and booklets.

Switch From Print To Web: Where To Start? | Smashing Magazine Page 9 of 20

2. Special Design Considerations

Typography and images are the two major design elements you’ll need to reconsider when making the switch from print to online publishing. No matter which format you’ve chosen, there are distinct differences between the way something appears on screen and the way it appears in print. In many ways, online publishing is much more forgiving than print of image compression and quality. On the other hand, digital typography is, in many ways, harder to master than print typography.

TYPOGRAPHY

A couple of major differences exist between best practices in print typography and those in digital typography. Font type and size should be reconsidered when transitioning between print and digital. Contrast between the font color and background color should also be taken into consideration.

1. Font Choice Typography is probably the most important decision you’ll make when transitioning from print to digital. Serif fonts have traditionally been used for body text in print publications because they are easier to read on paper. But studies have shown that sans-serif fonts have higher readability on screen. Switching the body text of your articles to a sans-serif font will often change the entire look of the publication and may require tweaking the overall design to maintain a unified style.

While many fonts originally designed for print are perfectly readable on screen, using fonts that are optimized for on-screen readability often comes with advantages. Georgia (serif) and Verdana (sans-serif) were both designed for on-screen use.

Compare the difference between 11-point Times New Roman…

Times New Roman 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.

…and 11-point Georgia:

Georgia 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.

Most will agree that the Georgia is much more readable than the Times New Roman example.

The same is true for sans-serif fonts. Here’s 11-point Arial…

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 Switch From Print To Web: Where To Start? | Smashing Magazine Page 10 of 20

Arial 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.

…and 11-point Verdana:

Verdana 11 point Phasellus codnimentum, est eu congue dapibus, justo trtor lobortis massa, sit amet dictum massa erat in lectus. Donec turpis mauris, mattis in, consequat nec, faucibus. Aliquam auctor mattis odio. Fusce congue commodo felis.

While both were designed specifically for on-screen use, Verdana still comes out easier to read in most cases.

Use Verdana and Georgia as your “gold standards” of on-screen typography; when searching for fonts, compare the readability of those to these. If a font is at least as readable as either of these, then you’re on the right track. If it falls short, you’ll have to either increase the font size or play around with contrast to make the type more legible. And remember, if you’re using a website- or blog-based publication format, you’ll need to stick with Web-safe fonts (I’d just recommend Verdana or Georgia in this case).

2. Font Size Most print publications use a 10- or 11-point font (some even go as small as 9 points). While this is perfectly legible on paper, it is often very difficult to read on-screen. And in the case of flip- book magazines, it means that even readers with excellent eyesight will have to zoom in to read articles. Increasing your font size to 12- or even 14-point type will make your articles much more reader-friendly.

Here is an illustration of how increasing the font size to 12 points makes a big difference in readability:

Compare the difference between Verdana and Georgia:

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 Switch From Print To Web: Where To Start? | Smashing Magazine Page 11 of 20

Notice how Verdana is, for the most part, still easier to read than Georgia.

If you’ve opted for a website- or blog-based digital publication, including links to increase or decrease font size is a nice feature to add. Depending on your target market, your users may not be familiar with their browser’s ability to increase and decrease type size.

The size you choose should correspond directly to the font’s complexity. If you’re using an elaborate script or grunge font (and I would recommend using these only for headers and sub- headings), you’ll want to increase the font size. Simpler fonts usually can be kept smaller.

3. Contrast and Color For some reason, a lot of people who design perfectly beautiful print products sometimes go nuts with color when they design digital products. Here are some best practices for color and contrast.

Using a very dark gray type instead of black is sometimes easier on the eyes. Even switching to a #999999 gray on a white background can make a world of difference in preventing eye strain in your readers. Going for too light and too low a contrast can have the opposite effect and make it harder to read (i.e. don’t use a #333333 gray on a white background).

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 Switch From Print To Web: Where To Start? | Smashing Magazine Page 12 of 20

While the first two are perfectly legible, the medium-gray type is noticeably harder to read for long periods of time. The light-gray font is very difficult to read and is probably best not used at all or reserved for things like image captions.

Beware of using a dark background with white type. Large blocks of white text set against a black background become very difficult to read. If you’re determined to use a combination of dark background and light text, decrease the contrast. Use a #333333 gray type on a black background, or even a #999999 background. In the examples below, notice how harsh the white text on the black background looks. When the text color is changed to a light gray or the background is changed to a dark gray, it is noticeably smoother.

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 Switch From Print To Web: Where To Start? | Smashing Magazine Page 13 of 20

Colored headings are perfectly fine to use, though fluorescent colors are often harder to read. Also, don’t use a type color and background color that are opposite on the color wheel (blue and orange, purple and yellow, red and green, etc.) Color combinations like these are almost impossible to read.

Colored body text is much trickier than colored headings. Navy blue, hunter green, dark brown and similar colors are generally fine on a white or very light-colored background. But the further you stray from black and gray and the brighter you go, the harder your text becomes to read.

While the dark blue is completely readable, the green is almost illegible. The red is readable but much more likely to cause eye strain in long passages of text. Use it sparingly.

IMAGES

There are two major differences between print and on-screen images. The first is the color space used, CMYK vs. RGB. The second is compression and overall image size.

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 Switch From Print To Web: Where To Start? | Smashing Magazine Page 14 of 20

CMYK vs. RGB CMYK stands for Cyan, Magenta, Yellow and Key (Key being whatever ink color makes black on the paper color you’re using — usually just black itself) and is the standard color space for printed material. Using these four ink colors in different screens, you can produce virtually any color in print. RBG, on the other hand, stands for Red, Green and Blue and is what every computer monitor, television and other digital equipment uses to produce color.

RGB generally produces brighter and more vibrant colors. As the photo below illustrates, blue is especially affected by the conversion from RGB to CMYK. Shades of just about any color can be affected and will generally appear duller in CMYK.

Because images in digital publications are viewed in RGB, no conversion is needed (scanners and digital cameras both render images natively in RGB). The other major advantage is that what you see on screen is what your readers will see (barring differences in monitor calibration). This means that proofing on screen is adequate, without the need to print out individual pages.

Image Compression and Sizing Because images in digital publications are viewed on screen, they can be compressed much more.

To determine the size your image needs to be, figure out how large your image will be at full zoom in your digital publication’s format. Your image will need to be at least that size at 72 dpi. If you’re working with a digital flip-book or PDF-style magazine, you may need to increase the dpi to make the image fit on the page at the proper size. For example, if your magazine can be zoomed in to twice its normal size, you’ll need to make your images at least 144 dpi. If you can zoom in to three times the normal size, your images will need to be at least 216 dpi.

I recommend using JPEG (set to “high” quality, usually level 8 or 9) or PNG format for your image files. Be careful with compression in JPEG, however, because you’re more likely to end up with “artifacts” in your final image. PNG offers a number of advantages to GIF, particularly when it comes to options for transparency and true-color palettes. And PNG images can be compressed to between 10 to 30% more than GIF images. For the most part, unless you are repeatedly re-saving images, the format you choose will make little difference to anything other than file size.

http://www.smashingmagazine.com/2009/04/16/switch-from-print-to-web-where-to-start/ 3/6/2012 14

15

16

Switch From Print To Web: Where To Start? | Smashing Magazine Page 15 of 20

RESOURCES:

• Graphic Design from Print vs. the Web covers the basic differences between print and digital design.

• Print Design vs. Web Design covers some of the specific differences between print and Web design. • • This Way to the Web, Print Designers! gives a good overview of switching from print to Web design.

3/6/2012