ASCIIcast of Fundamentals of Design by CodeSchool
- Typeface Classifications
- Font Size, Leading & Weights
- Line-Width & Widows
- Color Theory
- Color Scheme
- Color & Type
- Basic Layout
- The Grid
- Whitespce & Balance
Typeface Classifications
Content is king.
What’s your audience?
Find the typeface suits the content well.
Typefaces
Serif
-
Humanist Serif, suits for journalism or historical applications.
-
Transitional Serif, suits for traditional academia or legal applications.
-
Modern Serif, suits for arts or culture applications.
-
Egyptian (Slab Serif), suits for marketing or promotional applications.
Sans-Serif
Sans is the French word for without.
-
Humanist Sans Serif, suits for government or educational applications.
-
Transitional Sans Serif, suits for technology or transportation applications.
-
Geometric Sans Serif, suits for science or architecture applications.
script
Difficult to read, don’t use in body copy.
Comic Sans is a script font, not a Sans Serif font. Maybe don’t use it everywhere.
Principles
Don’t choose two fonts from the same style.
Don’t choose two fonts from the same class.
When mixing classes, find a similar trait using fonts that share one thing in common but are otherwise different.
Contrast over Harmony. Keep it the same or change it a lot, look for emphatic differences rather than mushy transitions.
Font Size, Leading & Weights
Establish visual relationships between elements on the page is going to allow your users to more quickly process the information.
Use different font size. Huge size is annoying, and 16px is good by suggestion.
Leading is around 120% to 150% of the body copy size.
Line-Width & Widows
Line Width Is Measured in CPL
Robert Bringhurst in “The elements of Typographic style” recommends 45 to 75 characters per line, 66 characters per line is widely considered the ideal. A width of 600px will hold around 75 characters of 18px text.
Use max-width to control CPL.
Save the Orphans & Widows.
No perfect solution.
Try tweaking with the font size, weight, line width, and leading to fix the problem.
Color Theory
-
Subtractive Color, using CMYK (Cyan, Megenta, Yellow) color space.
-
Additive Color, using RGB spectrum.
HSL
RGB is hard, while human process HSL. Hue, Saturation, Lightness.
Hue
Saturation
Lightness
Example
How to use?
What about HSB, B for brightness?
Color Scheme
Start by selecting a Base Color.
Keep Culture in Mind.
Build Scheme around Base Color.
Colors
Schemes
Monochromatic
Analogous
Analogous color schemes require you have colors with hues that both ascend and descend equally on either side of the base color. They also should be less than 40 degrees from the base.
Complementary
Don’t have to be perfect. Use the methods to tweak as needed to fit your project.
Color & Type
Typography must have a high degree of contrast between it and its background.
Black and white are the best.
Colors that are the same hue but have a very high saturation and lightness contrast are a close second.
Some colors are intrinsically difficult for humans to distinguish, such as red, green, blue, and orange.
Some colors are light colors, warm colors, like yellow, and some colors are dark colors, cool colors, like blue. So creating contrast in which the yellow is darker than the blue creates a very awkward experience.
Making yellow light, and blue dark is much more legible.
Warm and cool colors can be used to create depth, as warm colors appear closer to the screen or to the user. So use cool colors as the background and warm colors as the foreground.
You should combine colors to reinforce Visual Hierarchy. As an example, the CodeSchool website get progressively darker as you scroll, which anchors the page and create a more stable viewing experience.
Dont’ be tacky. And treat the image behind the text to make it stand out.
Basic Layout
Reinforces the Visual Hierarchy.
The Grid
It is made up of a system of horizontal and vetical lines.
-
The vertical lines create columns with gutters in between them that are used to proportionally distribute elements across the page.
Avoid clutter by respecting the gutters. Don’t put design elements or type in between the columns.
-
The horizontal lines are used to create a baseline for text that shoudl be equal to the line height.
Use them in Photoshop or another graphics software as a reference when designing.
Fixed or Fluid
-
With a fixed grid, the browser can get bigger or smaller, and the grid will remain constant.
-
With a fluid grid, it grows or shrinks with the browser window. And columns are either added or dropped to better serve that size.
Example
Whitespce & Balance
Balance all the things.
Symmetry
Asymmetry
All of the principles together contribute to balance.