Cintacs Pittsburgh web and software development company logo

Creating Innovative New Technology and Customer Solutions

Design should reflect the spirit of the content. "Content is king" is a popular saying in website design circles. When you are selecting typeface for your website ask yourself; how does the content influence the design?


Attributes that Influence Design:
1. Audience: Age? Race? Gender? Cultural Niche?
2. Tone: Casual? Formal? Friendly? Sarcastic?
3. Purpose: Informal? Conversions?


When you have answered these questions you will want to create a "Style Guide" - A reference document to avoid inconsistency.


Example:
Headline Text - Typeface associated with your <h1> tag.
Sub-Head Text - Typeface associated with your <h2> tag.
Navigation - Home | About | Contact - Typeface associated with your navigation.
Body Copy - Typeface associated with your <p> tag.
Byline Text - Typeface associated with your <small> tag.


Typography is verbal and visual. Different styles create different moods. In traditional typography, text is composed to create a readable, coherent, and visually satisfying whole that works invisibly, without the awareness of the reader. Most typefaces can be classified into three basic groups. Classification can be helpful in choosing and combining typefaces.


Classifications of Type:
Serif - A small line attached to the end stroke of a letter. (Examples include: Humanist, Transitional Serif, Modern Serif, Egyptian)
Sans Serif - Sans means "without". Sans Serif is a letter without a serif. (Examples include: Humanist San Serif, Traditional, Geometric)
Script - Strokes that join letters. (Examples include: Casual, Formal, Calligraphic)


Things to remember when choosing and combining typefaces:

When mixing typefaces you don't want to clash. You don't want to mix a Serif with another Serif typeface.

Mix and mingle typefaces. For instance if your Headline Text is a Serif typeface you would want to compliment it with a Sans Serif typeface for your Body Copy.

Strive for contrast over harmony. Keep it the same or change it a lot. When you mix typefaces you want to create striking differences by keeping your typeface transitions distinct not muddy.

However don't feel obligated to pick two type faces; a single typeface is fine; especially for beginners. You can use different font weights.

Remember to use web licensed fonts; Google Fonts is a good place to start.

http://www.google.com/fonts/ 

https://developers.google.com/fonts/docs/getting_started

https://think360studio.com/20-common-typography-mistakes-that-designers-make/

https://think360studio.com/50-best-fonts-for-your-website-headings/

Last but not least never use comic sans...

Back