Tweet
Tweet

Slide 1

Slide 1 text

Beautiful
 Web Typography

Slide 2

Slide 2 text

Mel Choyce DESIGN ENGINEER AT AUTOMATTIC @melchoyce melchoyce.design

Slide 3

Slide 3 text

INTRODUCTION TO 
 Beautiful Web Type

Slide 4

Slide 4 text

Web Design is 95% Typography — Oliver Reichenstein “

Slide 5

Slide 5 text

National Geographic http://www.nationalgeographic.com/mag... TYPE ON THE WEB

Slide 6

Slide 6 text

Ghostly Ferns http://ghostlyferns.com/ TYPE ON THE WEB

Slide 7

Slide 7 text

FCINQ http://www.fcinq.com/ TYPE ON THE WEB

Slide 8

Slide 8 text

Wired http://www.wired.com/ TYPE ON THE WEB

Slide 9

Slide 9 text

Seedlip https://www.seedlipdrinks.com/ TYPE ON THE WEB

Slide 10

Slide 10 text

NASA Gene Lab http://genelab.nasa.gov/ TYPE ON THE WEB

Slide 11

Slide 11 text

can make their type ANYONE LOOK GOOD

Slide 12

Slide 12 text

INTRODUCTION TO 
 Typographic Principles

Slide 13

Slide 13 text

Picking Pairing &

Slide 14

Slide 14 text

Picking Pairing &

Slide 15

Slide 15 text

think about Tone

Slide 16

Slide 16 text

Neutral Stylized >

Slide 17

Slide 17 text

Pick body fonts with multiple weights

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Picking Pairing &

Slide 21

Slide 21 text

One typeface, multiple weights

Slide 22

Slide 22 text

Sans + Serif = <3

Slide 23

Slide 23 text

Pick a Family when in doubt

Slide 24

Slide 24 text

Use decorative headers Sparingly

Slide 25

Slide 25 text

Borrow Pairings still worried?

Slide 26

Slide 26 text

Beautiful Web Type http://hellohappy.org/beautiful-web-type/ TYPEFACE PAIRINGS

Slide 27

Slide 27 text

Google Web Fonts Typographic Project http://femmebot.github.io/google-type/ TYPEFACE PAIRINGS

Slide 28

Slide 28 text

Typewolf http://www.typewolf.com/ TYPEFACE PAIRINGS

Slide 29

Slide 29 text

Font Pair http://fontpair.co/ TYPEFACE PAIRINGS

Slide 30

Slide 30 text

Size

Slide 31

Slide 31 text

don’t make me SQUINT

Slide 32

Slide 32 text

14-22 px body fonts

Slide 33

Slide 33 text

Line-height

Slide 34

Slide 34 text

1x is so, so sad.

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

1.4-1.6x for body fonts

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

1.2-1.4x for header fonts

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

body { font-size: 16px; line-height: 1.5; } h1, h2, h3 { line-height: 1.3; }

Slide 41

Slide 41 text

Line-length

Slide 42

Slide 42 text

45-75 characters per line* * including spaces and punctuation

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

More sometimes is okay

Slide 45

Slide 45 text

Less sometimes is okay* * especially on smaller screens

Slide 46

Slide 46 text

Balancing Act

Slide 47

Slide 47 text

Style

Slide 48

Slide 48 text

only center short text

Slide 49

Slide 49 text

only all-caps short text

Slide 50

Slide 50 text

avoid justified text

Slide 51

Slide 51 text

only underline links

Slide 52

Slide 52 text

limit your # of font styles

Slide 53

Slide 53 text

don’t use 100% black

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

INTRODUCTION TO 
 Using Fonts in WordPress

Slide 56

Slide 56 text

pick a Source

Slide 57

Slide 57 text

figure out your constraints

Slide 58

Slide 58 text

Self-Hosted? Cloud-Hosted?

Slide 59

Slide 59 text

figure out your budget

Slide 60

Slide 60 text

No budget? Small budget? Large budget?

Slide 61

Slide 61 text

Free Hosted Service

Slide 62

Slide 62 text

The Good Free!

Slide 63

Slide 63 text

The Bad • Not as many high-quality options • Limited styles/weights • Limited character sets • Limited multi language support • Often overused

Slide 64

Slide 64 text

Paid Hosted Service

Slide 65

Slide 65 text

The Good • Support • Higher quality fonts • More likely to find extended character sets • More likely to find multi language support • More likely to be both good and unique

Slide 66

Slide 66 text

The Bad • They cost money • Might have to pay based on traffic • More licensing restrictions

Slide 67

Slide 67 text

Self-Hosted Service

Slide 68

Slide 68 text

The Good • Totally customizable setup • Can remove characters to reduce font size • You “own” your fonts

Slide 69

Slide 69 text

The Bad • Requires additional setup • Requires additional tech knowledge • Optimization up to you • Often more expensive for paid fonts

Slide 70

Slide 70 text

use a Plugin

Slide 71

Slide 71 text

great if you’re not rolling your own

Slide 72

Slide 72 text

great if you don’t have file access

Slide 73

Slide 73 text

add it Manually

Slide 74

Slide 74 text

@font-face { font-family: 'Typeface'; src: url(‘Typeface.eot?') format(‘eot'), url('Typeface.woff') format('woff'), url(‘Typeface.ttf') format('truetype'); } Bulletproof @font-face http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Slide 75

Slide 75 text

WEBFONT GENERATOR Font Squirrel http://www.fontsquirrel.com/tools/webfont-generator

Slide 76

Slide 76 text

Google Fonts

Slide 77

Slide 77 text

Paid & Hosted • Depends on your service • Usually given something to add to your

Slide 78

Slide 78 text

THINKING ABOUT 
 The Future of Type

Slide 79

Slide 79 text

higher quality Free Fonts

Slide 80

Slide 80 text

Responsive Type

Slide 81

Slide 81 text

RESPONSIVE TYPOGRAPHY MEDIA QUERIES body { font-size: 100%; } h1 { font—size: 2.5em; } @media screen and (max-width: 50em) { h1 { font—size: 2em; } } @media screen and (max-width: 40em) { h1 { font—size: 1.5em; } }

Slide 82

Slide 82 text

RESPONSIVE TYPOGRAPHY JAVASCRIPT FitText.js http://fittextjs.com/

Slide 83

Slide 83 text

RESPONSIVE TYPOGRAPHY JAVASCRIPT FlowType.js http://simplefocus.com/flowtype/

Slide 84

Slide 84 text

https://css-tricks.com/viewport-sized-typography/ CSS Tricks: Viewport Sized Typography RESPONSIVE TYPOGRAPHY CSS

Slide 85

Slide 85 text

h1 { font-size: 6vw; } h2 { line-height: 3vh; } p { line-height: 2vmin; }

Slide 86

Slide 86 text

http://alistapart.com/blog/post/variable-fonts-for-responsive-design Variable Fonts for Responsive Design RESPONSIVE TYPEFACES

Slide 87

Slide 87 text

Dynamic Text

Slide 88

Slide 88 text

TYPE & SVG Animated Text Fills http://tympanus.net/Tutorials/AnimatedTextFills/index.html

Slide 89

Slide 89 text

Thanks! @melchoyce melchoyce.design https://choycedesign.com/type/