Mar 21 2011

Design Charts for Better Typography and Color

Advertisement

We’re designers, so it makes sense that a lot of us are visual learners and do better looking at charts and graphs than reading an article or listening to a podcast. Typography and color are two great topics that are perfectly suited for infographics, charts, and other graphical learning tools.
[fblike]
Below we’ve collected a good number of great infographics that will teach you how to use typefaces and colors effectively. There are guides for choosing a typeface, for combining typefaces, for figuring out what different colors mean in different cultures, and a lot more.

Typography

Dig into the history of typography and catch up on the typographic origins. Whether you need help choosing the right font or want to know how to effectively combine fonts, the graphics below can help, for both print and online design.

So You Need a Typeface
While at first this infographic appears to be a bit tongue-in-cheek, it’s actually quite useful. Start by choosing what type of project you’re working on, and then just answer a series of yes or no and good or bad questions to find a suitable typeface.

Screenshot

The Anatomy of Typography
Understanding all the elements that make up a typeface is an important step in learning to expertly combine typefaces. This infographic breaks down the anatomy of individual characters within a typeface, covering everything from aperture to strokes to the different types of terminals.

Screenshot

Periodic Table of Typefaces
The most popular fonts are graphically represented in the style of the periodic table of elements in this poster. It gives some brief history of each typeface (including the date it was first designed and who designed it), as well as the classificiation of each font. There are a number of different versions of the poster available for purchase, or you can print it yourself.

Screenshot

The Evolution of Typography
This infographic showcases the changes in typographic design throughout history. It covers the evolution of serif typefaces and sans-serif typefaces, as well as a brief description of the history of script and blackletter typefaces.

Screenshot

Mixing Typefaces
This simple chart serves as a guide for combining twenty-two different common typefaces. It offers three separate classifications for determining whether two typefaces are compatible: “Combine at will”, “Not a conservative choice”, and “Think again.”

Screenshot

19 Top Fonts in 19 Top Combinations
This great chart provides an instant visual reference to good combinations of popular fonts, including Helvetica, Garamond, Gill Sans, Minion, and more.

Screenshot

Type Palettes
Graphical representations of typography combos are a great way to see how different fonts work together. This Type Palettes article shows a number of complex typography combinations, using different typefaces for headlines, subheadings, text and captions.

Screenshot

Most Popular Fonts by Operating System
Not everyone is using @font-face for their website designs yet. And even those who are need a backup for older browsers (or in case their font service is down or unavailable). This chart shows all the most popular typefaces by operating system, and even includes the most commonly used fonts from Google Font Directory and FontSpring.

Screenshot

34 Typographic Sins
There are dozens of mistakes commonly made in typographic layouts. This poster details thirty-four of them, as well as what the correct usage is.

Screenshot

Color

Color science and theory is a remarkably complex field. The graphics included below, though, can offer valuable insight into the world of color, including how to effectively create color palettes and what colors mean.

Basic Color Relationships
This infographic gives all the basic information you need to know about color theory. It includes terms, the way RGB and CMYK work, and meanings of different colors, as well as a color wheel the illustrates warm and cool colors.

Screenshot

What Colors Mean to Different Cultures
When designing for an international audience, it’s important to note the effect your color scheme will convey to your audience. This handy chart shows exactly what different colors mean in different countries, helping to prevent any cultural faux pas.

Screenshot

How Color Effects Purchasing Decisions
If you’re designing an ecommerce site, it’s important to know exactly how different colors affect purchasing decisions made by your visitors. This chart shows the effects different colors have on those purchasing decisions, as well as which colors work bets for which types of buyers.

Screenshot

Colors of the Most Powerful Brands in the World
Certain colors have become associated with certain brands, both in the “real world” and online. This series of graphics explores the colors used in the various design schemes and logos of the biggest brands in the world. Each of these graphics explores a different aspect of the use of color in branding.

Screenshot

Colors of Twitter Profiles
This infographic compares the use of colors by geography, keyword, and demographic of Twitter users who have used the Colourlovers Themeleon Twitter profile designer. It also showcases the most colorful Twitter personalities, and the colors they use.

Screenshot

What Your Web Design Says About You
This infographic showcases the most popular color, typography, and other design options in web design are most popular, and what the different choices say about the site itself. The graph also delves into color science and theory, with interesting graphics representing each hue.

Screenshot

Top Voted Colors of 2010
Staying current on trends in color is important for designing a site that looks current (or stays timeless). This infographics shows the results of a survey of over 1000 people chose the most popular colors of 2010 and the words that the colors represent.

Screenshot

His and Hers Color Names
A useful, interactive infographic that displays the results of XKCD’s color survey, which used five million plus samples to judge what men and women consider accurate names for all the colors of the spectrum. Some are downright hilarious, while others are incredibly creative. In either case, it gives a good indication of how the sexes feel about different colors across the spectrum.

Screenshot

The Color Strata
Here’s another visualization of the XKCD Color Survey dataset, broken down into the 200 most common color names. The format used here is really interesting, and not something commonly seen.

Screenshot

Recognizing Brands by Color Scheme
An interesting study that seeks to simplify brand logos by breaking it down into it’s basic color and circles to represent text and lines. A useful way to see where the color scheme of a logo works it’s magic, which can help you design color schemes with more impact.

Screenshot

Useful Infographics

Why Does Gen Y Buy
This infographic is useful to anyone creating an ecommerce site that’s aimed at Generation Y, who spend about $20 billion online each year.

Interesting Facts and History of CSS
This infographic combines the history of CSS with a number of interesting facts about it. It includes the different versions of CSS, as well as support by different browsers.

WTF is HTML5 and Why We Should All Care
This is a brilliant infographic that shows what new features HTML5 has added, and what those features mean for the future of the internet.

User Centered Design
This infographic breaks down the elements of user-centered design, as well as the process of creating such designs.

HTML5 & CSS3 Readiness
This interactive infographic breaks down exactly which browsers support which new features of HTML5 and CSS3.

The Visual FAQ of SEO
This infographic gives a great breakdown of what you need to know about search engine optimization. It covers things like site architecture and structure, link building, and SEO tactics.

The State of Web Development 2010
Here’s a great rundown of the state of web development in 2010, including the popular browsers (desktop and mobile), OSs, and more.

Bounce Rate Demystified
This infographic from KISSmetrics showcases how bounce rate statistics work, and how they’re calculated.

The Anatomy of a WordPress Theme
This is an incredibly useful infographic that breaks down the parts of a WordPress theme in great detail. If you’re a theme developer (or want to be), it can also serve as an excellent quick-reference guide.

The Anatomy of a Perfect Landing Page
The creation of a great landing page is equal parts art and science. This infographic breaks down exactly what goes into a great landing page.

Interesting Infographics

Salaries in the Realm of Design
This infographic compares the salaries of different design professions in the United States, India, and the UK. It also covers salaries by country depending on the type of employer (Company, College, Non-Profit, etc.).

Through the Generations: How the Web is Being Used
This infographic breaks down common internet usage patterns among different generations, including Millenials, Gen X, GI Generation, Silent Generation, and the Boomers.

The Awesome Evolution of the Internet
This is a fun infographic that breaks down the evolution of internet users from the beginning of the web.

The History and Present State of Domain Names
Ever wondered what the evolution of domain names looks like? This infographic breaks it down from the first .net domain name in 1985 through now.

The Evolution of the Blogger
An interesting infographic that shows the evolution of bloggers from those keeping online diaries to company bloggers, vloggers, and others.

The Power of WordPress
This infographic showcases the power of WordPress as both a CMS and a blogging platform. It includes a timeline of WordPress from May 2003 through September 2010, as well as details on the types of sites using WP and daily user activity.

Multiple Identities
This infographic discusses what profiles users utilize to sign up for and use different services across the internet, including Google, Facebook and Twitter.

The Internet in 2020
Here’s a great graphical representation of what the internet is predicted to look like in 2020, based on current data. It covers how many people will likely be online, who those people will be, and more.

Origin of Important Typefaces
This infographic shows a timeline of when important typefaces were developed and by whom.

Just How Massive is Google, Anyway?
Figuring out just how big Google is can be tricky. This infographic sheds some light on the subject.

The History of Programming Languages
This infographic from O’Reilly shows the history of various programming languages, from 1954 until 2004.

Dribble: What Is It Used For?
An interactive HTML5 infographic that offers details about Dribble usage and users.

The World of Data We’re Creating on the Internet
This infographic from Good Magazine shows how we use the internet and the data people create on a daily basis, including email, video, and other content.

The Brads – Learning About Contrast in Design
Contrast is a very important concept designers need to grasp if they want to be successful. This infographic/comic strip from Vectortuts+ explains contrast in an easy-to-understand way.

(ik)
[fblike]

About the Author

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Comments and Discussions
  • Emma, 21 March 2011

    Wow! This is an awesome collection of useful design-y stuff – thanks!

  • Tugi, 21 March 2011

    Perfect stuff, will definetly have look at this when I have a time.

  • Armig Esfahani, 22 March 2011

    Amazing collection for someone who’s in love with Typography like me.. great, lovely & useful one..

  • Ömer Küçükyurt, 22 March 2011

    so informative article, thanks

  • Sony, 22 March 2011

    Typography is main key factor for any website. This is really great information about typography.

  • Franklin, 22 March 2011

    I am overwhelmed at the prevailing development of webpage design. I am well informed about your research and detailed technical information. besides, your presentation style is superb, straight to the point with illustrations makes it very clear. keep it up.

  • Robbie, 22 March 2011

    Perfect timing for me. I was after a bunch of “did you know” facts about the Internet. Cheers!

  • Sven, 22 March 2011

    Great article, great inspiration, thanks a lot!

  • Darek, 22 March 2011

    Cool collection. Thanks a lot!

  • Mary, 22 March 2011

    Very useful and interesting, I want more articles ! :-)

  • Samuel Jesse, 23 March 2011

    Great post to fall back on for inspiration!

  • Paulraj, 23 March 2011

    Thanks for sharing wonderful and useful ideas.

    Regards
    Paul

  • Mahkam, 23 March 2011

    That was a great article. I am a fashion designer and graphic student and the article is quite useful.It is a perfect collection and nicely summerized the key elements of typography and Colour theory in fine and visual art.
    Thanks

  • Sandy, 24 March 2011

    This was extremely interesting! Thanks for putting it together. I am a graphic designer and found lots of valuable information.

  • Michael Yaeger, 24 March 2011

    This is the best resource I’ve found in a while. Thanks!

  • Peter, 25 March 2011

    In “Through the Generations: How the Web is Being Used”, I think the order of the pie charts on the percent of each generation on line would make more sense if it was the same as the timeline above.

  • Goncalo Espinha, 26 March 2011

    Excellent, no words for this collection… Thanks!!

  • ratesman, 27 March 2011

    So informative article, Thanks!!

  • Pablo, 28 March 2011

    Great! Thanks a lot 4 sharing your knowledge.

  • Eve, 28 March 2011

    BRILLIANT! Thanks

  • Janine, 29 March 2011

    Great set of resources. Thanks!

  • Shalafy, 01 April 2011

    Huh .. amazing .. I very thank you this essential collection of informations :)

  • Brett Widmann, 18 May 2011

    These are really helpful charts! Thanks for sharing.

  • Yaroslav Turov, 24 January 2012

    Awesome useful! Thank you very much!

  • Cole Rivers, 27 March 2012

    Loved the periodic table, very helpful. Thanks!

  • Adrian, 02 April 2012

    Some great articles here. I like the one with the significance of colour when recognising brands! :)

  • Alex, 01 November 2012

    This is the best article from the entire Internet! Thanks a lot!!!!!

search form
 
image description image description