THE SPACE
• • •
40
10
80
Spacing
Use a systematic approach when your building designs for digital use.
Make sure you record these and use them throughout the layouts. Call out areas of "uniqueness" when designing outside this frame work. Why should you do this? Because, engineers will love you. There going to use this same "system" or "framework" of attributes that can be easily applied across all screens or layouts.
Consistency
Keeping you spacing consistent is a fundamental rule. Everything in
design should have reason and logic behind it's decision and that includes
space too. Use any patterns that make logical sense and try your best to
stay within these patterns during the design process.
Letterpress freegan artisan, bush wick bun mi with a side of austin paleo pie cliche before they sell out cracker with cheese.Aesthetic scenester plaid, mustache wolf moon food truck american.
Letterpress freegan artisan, bush wick bun mi with a side of austin paleo pie cliche before they sell out cracker with cheese.Aesthetic scenester plaid, mustache wolf moon food truck american.
Letterpress freegan artisan, bush wick bun mi with a side of austin paleo pie cliche before they sell out cracker with cheese.Aesthetic scenester plaid, mustache wolf moon food truck american.
THE SPACE
• • •
Responsive made easy.
1024PX WIDTH
3 COLUMNS
Use a three column grid to start
the layout of a responsive design. Each grid should be the width of
the phone (think layout not pixels).
The desktop and tablet landscape layout will need no adjustments.
The tablet portrait will need to adjust
a bit. The mobile version will have
everything re-stack. Once you know
how everything stacks you can now adjust the scaling behavior, size adjustments, break points and the behavior in between break points.
link
Use this spacing method for layouts to easily
communicate the specs for engineers to build.
It's also helpful in showing text pixel height.
10 - pixels
P
THE MOBILE SPACING
• • •
TITTLE
TITTLE
TITTLE
X
X
X
Headline
Headline
Headline
A
C
TRACKING & KERNING
• • •
Tracking
kerning
EQUAL SPACING
VISUAL SPACING
Tracking sets the space in between letters at an exact equal distance from one of another.
Kerning is art of setting visual space in between letters at an to create visual harmony.
THE EQUAL SPACING
• • •
Kerning is all about the visual space in between letters.
The goal is equal visual space. The theory is that each
space in between each letter should acquire the exact
same amount of water. This works for the most part careful
when it comes to awkward letter pairs like "oo" or "LA".
E
THE KERNING TIPS
• • •
KERN UPSIDE DOWN
Equal
width
KERN IN GROUPS OF THREE
Kerning
Kerning
Kerning
Kerning
KERN WHEN SCALING
logotype
logotype
MORE SPACE
LESS SPACE
GET AWAY WITH ALL CAPS REALLY SMALL
ALL CAPS WITH 2.0 LETTER
SPACING WITH 1.4 LINE HEIGHT.
LINK
PRINT CHECK WHEN GOING BIG FOR PRINT WORK
BIG
SIGN
BIG
SIGN
DON'T ZOOM TO FAR IN WHEN KERNING & MAKE SURE TO ZOOM OUT TO CHECK
Zoom.
Practice at:
type.method.ac
S
Equal
width
Equal
width
S