A, B, C &
TYPOGRAPHY TIPS FOR YOUR WEB STORY PART I
Host Paul gives an introduction into typography.
Host Paul gives an introduction into typography.
OVERALL RULE
Establish beautiful fonts and hierarchy to guide the eyes of the readers through your story.
GIF of a women rolling her eyes in different directions while reading.
We start with three basic rules of thumb.
1. AVOID WALLS OF TEXT
Try to stay within approx. 200 characters per page.
Animation that shows how to much text in a story looks like.
Animation that shows how to much text in a story looks like.
2. MAKE SURE TEXT IS VISIBLE
Avoid too small font size or too little color contrast.
Animation that shows too small font size and too little color contrast in a Web Story.
Animation that shows too small font size and too little color contrast in a Web Story.
3. LET MULTIMEDIA DO THE TALKING
Image or video should say the important thing. Text is bonus.
Animation that shows how visual Web Stories are.
Animation that shows how visual Web Stories are.
BASIC TYPOGRAPHIC TOOLKIT
1. Style
2. Layout
Host Paul introduces the basic typographic tools.
Host Paul introduces the basic typographic tools.
STYLE: THE RIGHT FONT FAMILY
The easiest way to change what the text looks like. There are some broad characteristics:
Fonts with serifs
Fonts without serifs
Cursive fonts
Monospaced fonts
The choice of font can make a reader feel different in the moment even though the words are the same!
TRAIN RIDE TO BUSAN
Train ride to Busan
What a lovely influencer trip.
This ride seems to be a scary adventure.
Get a more pronounced effect by selecting the right font in a font family. For example:
Condensed styles for headlines.
Thin styles for an elegant feeling.
Animation that shows different fonts of a font family.
Animation that shows different fonts of a font family.
Host Paul introduces the layout part.
Host Paul introduces the layout part.
LAYOUT: THE ALIGNMENT
Justify: Often works only well for columns, so use it sparingly.
Center: Works well for specific short texts like poems or greetings.
Right: Works well, when you position your text on the right side.
Left: Works well, when you position your text on the left side.