The Difference between Web and Graphic Design

by Andy Eaton


Designing for web and print are two different experiences. Just because a designer is good at one doesn’t mean they’ll be good at the other. It’s necessary to understand that web and print share many similarities, but they also have many differences.

Below is a list of things to consider when going from print design to web design:


Resolution is the quality of an image. It’s measured in terms of pixels. If you see an image listed as “72 ppi”, that means the image has 72 pixels per inch (ppi). Because web graphics are viewed on screen, they should be no larger than 72 ppi. A large ppi image will load slower, and won’t necessarily look any better.

Image Files – Gifs and Jpegs

JPEG stands for Joint Photographers Experts Group. It’s a great format that retains color and detail found in photographs and graphics with lots of color blends. JPEGs can display millions of colors so it’s ideal for print work.

GIF stands for Graphics Interchange Format. Most web pages use this format because it’s supported by all web browsers, can display up to 256 colors, and can include transparent backgrounds. GIFS are appropriate for image files with little color variation, and for images that will only be viewed on screen.

Photographs saved as GIFs may appear grainy. Single color images saved as JPEGs may appear fuzzy. When you save a graphic image, consider what type of file it is. Remember, GIFs work best with images having few colors or color variations. JPEGs work best with photographs or images to be printed.


There is a major difference between choosing fonts for web as opposed to print. With print design, your completed piece will display the font specified during the design process. You don’t have to worry that a reader will open your brochure and not have the proper fonts displayed. However, web designers never know for sure if their fonts will display properly.

Unlike with print, web fonts differ based on the web browser being used. Your audience can only view the same font you’re viewing if it’s installed on their computer. If you design a beautiful website using Chaucer Bold, and none of your viewers have that font, their browsers will have to find a substitute.

This is why it’s good to be conservative when it comes to web fonts. Your beautifully designed page can look horrible when displayed on someone else’s browser. Don’t let your hard work go to waste. Stick to fonts such as Helvetica, Arial, Times New Roman, or Verdana. All web browsers are capable of displaying these fonts. However, if you do want to use a creative font, you can include it in a graphic file. But this will cause your page to load slower.

If you’re a print designer faced with designing a web page, take time to study the subject. You will be able to create a pleasing and effective site if you recognize the differences between print and web design.

Article Source: