Content is King. The designers one essential task is to interpret and communicate the content. Design studio’s formal mission statement targeting business leaders who are looking to bring their company out of the analog-only world. Elegant, simple and large type that intentionally mashes with irregular shapes to reinforce their grasp on the tension between old business and new technology.

Attributes that Influence Design

• Audience: Age? Race? Gender? Cultural Niche?
• Tone: Casual? Formal? Friendly? Sarcastic?
• Purpose: Informational? Conversions?

 

Lets create a  Style Guide. We will talk about typography, color and layout throughout this fundamentals of web design chapter. Today we are gonna talk typography and give you some example. Reference document with styles for multiple instances throughout your application

Headline Text

B-Head (Or Sub-Head) Text

Nav Item 1 | Nav Item 2 | Nav Item 3

This is body copy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat.

– Byline Text on July 5th, 1987

Some fonts are Just Plain Awful. Good fonts are often taken for granted with the thousand of easily available free fonts. Invest the time to choose good
typefaces that will really complement the content well.

Typography is both Verbal & Visual. The reader surveys the overall graphical patterns of the page, and then parse the language and read.

 Serifs are the small lines tailing from the edges of letters.

HUMANIST Classic & Traditional Great for journalism or historical applications.

TRANSITIONAL Strong, Stylish,  Dynamic. Great for traditional academia and legal applications

 

Modern Structured, Clear & Elegant Great for arts and culture applications

EGYPTIAN (SLAB SERIF) Authoritative, yet friendly. Great for marketing and promotional applications

Fonts that lack serifs are called sans-serif

 

HUMANIST SANS SERIF

Tension between perfect and imperfect, Great for government or education applications

TRANSITIONAL SANS SERIF

Unassuming as Modern, Great for technology or transportation applications

GEOMETRIC SANS SERIF

Strict, Objective & Universal, Great for a science or architecture application

Mimics handwriting or calligraphy

FEEL FREE TO Mix and Mingle

While one typeface is often enough, adding another typeface can create a beautiful effect.

Using a serif for headline text and sans serif for body copy and vice versa is the simplest way to mix typefaces.

Garamond (Humanist serif)
Epic (Humanist serif)

From The Same Style. Those fonts are too close to one another to really look good.

Epic (Humanist Serif)

GOING FURTHER, DON’T CHOOSE TWO FONTS

From The Same Class

(Slab Serif)
Unless you really know your typefaces, it’s difficult to choose two serifs or two sans that actually complement one another.

Agora

Epic (Humanist Serif)
Myriad (Humanist Sans)

WHEN MIXING CLASSES

Find a Similar Trait

Using fonts that share one thing in common but are otherwise different (like a humanist sans and serif) creates a great pairing.

 

Perpetua (Transitional Serif)
Gill Sans (Humanist Sans)

THAT TRAIT CAN EVEN

Be Largely Abstract

Like these two fonts, that were both designed by Eric Gill. Similarities in chronology, visual details or typeface designer between otherwise different fonts create great pairings.

STRIVE FOR

Contrast Over Harmony

A good rule to follow when searching for typefaces to use alongside each other: Keep it exactly the same or change it a lot.

A geometric sans used sparingly as headline and pull-quote text along a transitional serif body-copy creates a great pairing.

Using a script next to a geometric sans is about as much contrast as you can get. Thee variance in handwriting vs. the objectivity of shapes can be stunning.

DON’T FEEL OBLIGATED

Single Typeface is Okay!

Many font families are versatile enough to only use one for your entire project. For the beginning designer, this

ideal.

The entire Code School site is designed using the different weights of just one sans-serif font family.

DON’T BE A PIRATE

Use Web Licensed Fonts. Ten use a font-face generator to prepare all the css includes and files for use in your project.

STEP TWO

Type Size

Once we’ve selected a font, we need to set the sizes in our style guide. But first, lets take a quiz.

WHAT DO YOU SEE?

Two squares? A blue and a gr&n square? A big and a small square?

 

HUMANS CREATE RELATIONSHIPS

It’s How We Process. We relate this to that in order to understand things.

 

ESTABLISH

Visual Hierarchy

Create visual relationships between elements in your design that users can latch on to. If they can’t latch on, they’ll leave.

 

CONTENT:

Informative site promoting a new twist on a traditional everyday food item, dipping sauce.

Use large, handwritten type and lifelike photographic elements strewn about in an apparently chaotic manner in order to add visual intrigue to a mundane item.

VISUAL HIERARCHY 101

Differences in Size

The eye naturally moves (om big elements down to the small elements, and helps users process the content

Difficult-to-process sea of text. Variance gives a user something to latch on to

 

Headline Text

B-Head (Or Sub-Head) Text

Nav Item 1 | Nav Item 2 | Nav Item 3

This is body copy. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat.

Byline Text on July 5th, 1987

START WITH

Setting Body Copy

There is no golden standard, good designers advocate for body copy anywhere from 16 – 26px

Well-respected creative journal

uses 16px body copy

Well-respected
designer uses
26px body copy

PERSONALLY,

Huge type is annoying. For this course, we’re going to suggest 16px as the ideal body copy size. Weigh each case individually.

Leading is the amount of space between lines of text

Leading that is too large negatively affects readability

Leading that is too tight can create a claustrophobic feel and rush the reader

Good leading is around 120-150% of the body copy size

 

SET LEADING RELATIVELY

line-height: 1.5;

This sets the leading to be 150% of the body copy, so you
don’t have to re-adjust if the font size changes.

 

ANOTHER VISUAL HIERARCHY TOOL

Use Bold/Italic Weights

Different weights add emphasis and intrigue.

Too much bold can muddy your hierarchy

 

So can weights that go against the “natural value”

 

Use a “less is more” approach to really enhance your hierarchy

 

NEXT UP:

Line-Width

Lines that are too short are difficult to read

Lines that are too long are also tough to read

 

LINE WIDTH IS, Measured in CPL, Characters per line, 50-70(including spaces) is optimal

 

55-65 CPL

 

As the type size increases, the
line-width also increases, but
the CPL remains the same

 

IN THE CSS, USE

max-width: ;

 

1000px

55-65 CPL
font-size
26px
630px

Even though our browser window is 1000px wide, our content has a max-width of 630px, in order to preserve optimal line-width

 

20-25 CPL

font-size
26px

 

30-40 CPL

font-size
16px

 

When viewing on the desktop, the max-width is set to 730px with a font-size of 22px, averaging 70-80 CPL. When viewing on the desktop, the max-width is set to 730px with a font-size of 22px, averaging 70-80 CPL

But on mobile devices, its 360px with a font-size of 19px. Leaving us with an average CPL of 40-45

FINALLY

Save the Orphans

And the Widows, they n&d to be saved too.

 

Widow 🙁

Typography

Orphan 🙁 🙁

THERE REALLY ISN’T A Perfect Solution

Especially when dealing with large bloc- of content, there isn’t always a way to prevent it. Try Tweaking with font size, weight, line width or leading to fix the problem.

 Oops not finish yet. We will update this post further.

License Under Creative Common 2.0