TYPOGRAPHY TIPS FOR YOUR WEB STORY PART II

Click Here For Part I

LET'S SPLIT THIS INTO TWO CATEGORIES:

[{"selector":"#anim-282e1c1a-2ea2-45a6-bb58-9082e040f99f","keyframes":{"opacity":[0,1]},"delay":1000,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8b694670-c0dd-4f7c-8101-e425dbce2dfd","keyframes":{"transform":["translate3d(116.27119%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd398026-ac0a-4e05-b8af-bd42b6d91f34","keyframes":{"opacity":[0,1]},"delay":1800,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-521d53f3-e727-4641-b9c3-b65d67049342","keyframes":{"transform":["translate3d(-123.05084%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1800,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ae9b2dc4-7bdd-4f65-bf99-24ba025588d8","keyframes":{"opacity":[0,1]},"delay":1000,"duration":800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-95859a43-0bcc-4e0c-80a8-96ae5e25a605","keyframes":{"transform":["translate3d(115.28663%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1000,"duration":800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-588c7d86-badd-4256-87f5-145fd136b68a","keyframes":{"opacity":[0,1]},"delay":1800,"duration":800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36a39220-fc16-44de-9989-558776cfdc10","keyframes":{"transform":["translate3d(-115.72327%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":1800,"duration":800,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

AESTHETICS & ACCESSIBILITY

-use too many colors.

[{"selector":"#anim-2a6e9613-0431-486d-97bd-7f24ecf31675","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9a821064-1f27-47e9-97a9-7a69cb34d0ca","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b40db958-cd65-4a81-a447-cc7765b436cc","keyframes":{"transform":["translate3d(0px, 961.72879%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9effc53a-5272-4b61-8b0e-318e50fdc3f1","keyframes":{"transform":["translate3d(256.97672%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .8, 1)","fill":"both"}] [{"selector":"#anim-371ef881-727a-4c89-b6d8-7f74954d0525","keyframes":{"transform":["rotateZ(180deg)","rotateZ(0deg)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.2, 0, .5, 1)","fill":"forwards"}] [{"selector":"#anim-eeefdbfb-bee6-417d-8d92-c1f8b9f31ae4","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-7ecf64eb-3b4c-4839-917e-9925d6b489ca","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-7e064f9b-45d0-4208-a46b-85a1fa1a792e","keyframes":{"opacity":[1,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-582c0882-8b00-43ee-bde8-07f1f0176c9e","keyframes":{"transform":["scale(3)","scale(1)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-6c337257-3b2f-4a0e-a354-63cc9a9c4079","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] many

COMPOSITION & HIERARCHY

[{"selector":"#anim-2dc0daa0-19a9-4de8-9588-372079b9168d","keyframes":{"opacity":[0,1]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9d58fdc-41a7-42b5-b79d-d4ab76198bb3","keyframes":{"transform":["translate3d(-119.66102%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":1000,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

TYPOGRAPHY TIPS FOR YOUR WEB STORY PART II

LET'S SPLIT THIS INTO TWO CATEGORIES:

AESTHETICS & ACCESSIBILITY

COMPOSITION & HIERARCHY

AESTHETICS & ACCESSIBILITY

This chair is pretty. But also 100% useless.

AESTHETICS & ACCESSIBILITY

Make sure that your text is not only pretty. But also readable. How?

AESTHETICS & ACCESSIBILITY

For example, use a contrast checker to optimize your content.

-use too many colors.

TRY NOT TO OVERDO IT AND DON'T:

too

many

fonts.

too

font

sizes

- use

too

many

text

animations.

- use

- use

COMPOSITION & HIERARCHY

You can create hierarchy with size and direction.

COMPOSITION & HIERARCHY

An easy way to create hierarchy is to use the size of your font.

COMPOSITION & HIERARCHY

Large text becomes a headline.

Small text becomes a body text.

Think about how to visually separate text and use negative space.

COMPOSITION & HIERARCHY

MORE ON YOUTUBE

There is much more to learn about layouts, e.g. letter spacing and line spacing. Watch the full video on our Web Creators channel.

TYPOGRAPHY TIPS FOR YOUR WEB STORY  PART II

LET'S SPLIT THIS INTO TWO CATEGORIES:

AESTHETICS & ACCESSIBILITY

COMPOSITION & HIERARCHY

AESTHETICS & ACCESSIBILITY

This chair is pretty. But also 100% useless.

AESTHETICS & ACCESSIBILITY

Make sure that your text is not only pretty. But also readable. How?

AESTHETICS & ACCESSIBILITY

For example, use a contrast checker to optimize your content.

-use too many colors.

TRY NOT TO OVERDO IT AND DON'T:

too

many

fonts.

too

font

sizes

- use

too

many

text

animations.

- use

- use

COMPOSITION & HIERARCHY

You can create hierarchy with size and direction.

COMPOSITION & HIERARCHY

An easy way to create hierarchy is to use the size of your font.

COMPOSITION & HIERARCHY

Large text becomes a headline.

Small text becomes a body text.

Think about how to visually separate text and use negative space.

COMPOSITION & HIERARCHY

MORE ON YOUTUBE

There is much more to learn about layouts, e.g. letter spacing and line spacing. Watch the full video on our Web Creators channel.

TYPOGRAPHY TIPS FOR YOUR WEB STORY PART II