Chat with us, powered by LiveChat
Menu Search

Designing for the web.

While some people may have been more exposed to other areas of art, allowing them to have an 'eye for design', other times it is just a matter of studying the craft.

As a web design company, we want to point out a few of the basics to keep your website looking good. 

Selecting a Font 

Selecting a proper font may be the trickiest when it comes to a solid design. This is especially true considering how many fonts are available which makes it overwhelming to decide where to even begin.

A solid beginning rule would be to only select web based fonts. Some fonts are meant for beautiful graphics while others are meant for beautiful websites. 

Another basic rule would be do not use script fonts for paragraph text to keep everything readable. This means any font that is hard to read should never be used for paragraph text. Oh, and no comic sans. Ever. 

Mirroring The Message

We need to determine a few fonts that reflect the website mood and message. This is crucial. You do not want a fun site about mountain biking to display an elegant font that would be better suited to discuss a gala. 

Let's start with Serif vs San Serif. 

Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. An example would be the Times New Roman font. Sans serif does not have these details or flourishes. An example would be the Arial font.

Mancon Printing

 

Serif

Humanist

  • Classic and traditional
  • Best used for history or journalism

Transitional 

  • Strong, stylish, and dynamic
  • Best used for traditional academics and legal

Modern

  • Structured, clear, and elegant
  • Best used for culture & arts

Slab/Egypt

  • Authoritative, yet friendly
  • Best used for marketing and promotions
 

Sans-Serif (without serif)

Humanist

  • Tension between perfect and imperfect
  • Best for government and education

Transitional

  • Unassuming and modern
  • Best used for tech and transportation 

Geometric

  • Strict, objective, and universal
  • Best used for science and architecture

 

Matching Headings and Paragraphs

The next task at hand will be pairing headings with paragraph text after determining the fonts that best reflect your website mesage. 

  1. Don't select two fonts from the same style
    • Example: Two Humanist Serif fonts
  2.  Don't pick two fonts from the same class
    • Example: Two Serif fonts

 

A rule of thumb would be two select two contrasting fonts that have something in common. This may be a Humanist Serif with a Humist Sans Serif. 

Implementing A Font

You may be wondering how you actually add the font to your website now that you have it narrowed down. 

Adding a font to the HTML.
The above image shows the font being added to the HTML. 

Adding a font using CSS.
The above image shows the font being added to the CSS. 

Color Schemes

After you decide on the perfect font for your website, you will need to then focus on the best color schedule. 

Color Psychology

Color plays a serious role in mood whether you are painting your house, designing a flyer, or making a website. 

Brown:  Warmth, coziness
Black: Power, sophistication
Grey:  Somberness, stability
Blue: Trust, confidence
Red: Excitement, passion
Pink: Youthfulness, romance

Purple: Luxury, wisdom
Orange: Energetic, vibrant
Green: Natural, growth
White: Purity, simplicity
Yellow: Happiness, joy

Color Schemes

Typically, websites display more than one color which means we need to determine a color scheme. We will focus on 3 common types

Monochromatic: Same base color but different saturations and brightnesses, typically 5 total. 
Analogous: Has colors that vary in saturation and lightness, hue increases and decreases. 
Complementary: Varies in saturation and lightness with hues of the same color and opposite. 

Start Designing

Now that some of the basics are in place, you can start designing or at least be able to clearly voice what you want to your project manager.

Have any other basic tips or favorite font pairings? Let us know

Login    Register
Please Login to post a comment     

Comments (0)

3 Ways to Engage

1. Call 412.353.1050, extension 1

2. Complete the quick contact form to the right

3. Launch our project planner to begin the discussion

 

Quick Contact

  • This field is for validation purposes and should be left unchanged.

Get Started With Our Project Planner

A few details about your project and goals is the first step towards identifying a solution that's right for you.

Launch Planner