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.

 

 

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

S

TRACKING & KERNING

• • •

Tracking

 

EQUAL SPACING

Tracking sets the space in between letters at an exact equal distance from one of another.

kerning

 

VISUAL SPACING

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.

 

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