Typography
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