Colors and typography

Color and Typography for DIY Web Designers

The tools you need

Colorzilla and What Font are two extensions for the Chrome browser.

Colorzilla is a simple color picker tool. When you find a web site with a color scheme you like, you just activate the color picking tool and click the section of the web page that contains the color you like. Make a note of that color and use it in your own designs.

Use Collorzilla to click an element and find the color
Use Collorzilla to click an element and find the color

What Font is similar to Colorzilla but instead of telling you what color is being used it tells you what font is being used. What Font Chrome extension tells you what font family is being used as well as the font size and line height.

I used WhatFont to find the font family and size for this headline
I used WhatFont to find the font family and size for this headline

 

You can’t change every font setting using Generate Press premium plugin. But you can usually change enough to get the look you want.

Customizing the typography using the Premium version of Generate press
Customizing the typography using the Premium version of Generate press

 

If you have the premium version of Generate Press you can apply those settings to your website, all you have to do is go to…

  • Dashboard > Customizer > Typography > Body
  • (or) Dashboard > Customizer > Typography > Content etc.

And apply the same font family, size and line height to your site.
You can find more color picking advice here

Choosing your Colors and Typography

Color and typography are two of the cornerstones of your web design.

Learning all you need to know about color and typography might seem like a daunting task. But there’s a short cut that can give you fantastic results fast.

How to find great color schemes and typography…

Just serf the web and find sites that already have great typography or color schemes and use those colors and fonts on your site too.

You might have heard the term copy like a professional. The idea is simple, all good professionals are inspired by the top designers in their field. You look at their work, absorb it and then use that inspiration in your own designs.

The dividing line between inspiration and copying

This is a decision only you can make. But one good rule of thumb is that if your inspiration comes entirely from one site, you’re probably copying. But if your typography comes from one site, your color scheme comes from another and the layout you use comes from a third website, the end product is much more your own.

Err on the side of caution, you don’t want to get sued!