The ABCs of Web Typography

Slide 1

Slide 1 text

THE ABCS OF WEB TYPOGRAPHY JAMES COLEMAN, DEVELOPER AT BUGHERD

Slide 2

Slide 2 text

WEB DESIGN IS 95% TYPOGRAPHY https:/ /ia.net/know-how/the-web-is-all-about-typography-period/

Slide 3

Slide 3 text

TYPOGRAPHY A TYPEFACE IS THE DESIGN OF THE LETTERFORM

Slide 4

Slide 4 text

FONT A FONT IS THE DELIVERY MECHANISM

Slide 5

Slide 5 text

CHOOSING A TYPEFACE IS NOT TYPOGRAPHY

Slide 6

Slide 6 text

MAKE BODY TEXT EASY TO READ https:/ /ia.net/know-how/the-web-is-all-about-typography-period/

Slide 7

Slide 7 text

MAKE BODY TEXT EASY TO READ

Slide 8

Slide 8 text

James Craig, Designing With Type (1971) Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.

Slide 9

Slide 9 text

MAKE BODY TEXT EASY TO READ

Slide 10

Slide 10 text

MAKE BODY TEXT EASY TO READ

Slide 11

Slide 11 text

MAKE BODY TEXT EASY TO READ • 45 to 85 characters per line (including punctuation) • A line height somewhere between 125% and 150% of the font size. • A font size that is readable, depending on the environment.

Slide 12

Slide 12 text

THERE IS NO GOLDEN FONT SIZE

Slide 13

Slide 13 text

X X X Helvetica Times New Roman Arial font-size: 200px;

Slide 14

Slide 14 text

X X X Birch Std OCR A STD Zapfino font-size: 200px;

Slide 15

Slide 15 text

http:/ /tex.stackexchange.com/questions/167290/why-do-different-fonts-have-different-point-sizes

Slide 16

Slide 16 text

X Zapfino font-size: 200px; Does not give a single fuck

Slide 17

Slide 17 text

Zapfino

Slide 18

Slide 18 text

BODY FONT SIZE • Defaults to 16px in most browsers • Default could change in the future, especially on different devices like mobiles. • Set the base font size on the HTML element

Slide 19

Slide 19 text

BASE FONT SIZE html { font-size: 100%; } html { font-size: 16px; }

Slide 20

Slide 20 text

Jennifer Farley, New Relic There is no rule to cover tracking for every font. The best guideline is to use your eyes. Generally if the letters look like they’re too close together, they probably are. Lots of practice and experimentation is how you really learn to use tracking in your designs.

Slide 21

Slide 21 text

TRACKING (LETTER-SPACING) .element { font-size: 16px; letter-spacing: 1em; //16px }

Slide 22

Slide 22 text

TRACKING (LETTER-SPACING) .element { font-size: 16px; letter-spacing: 0.5em; //16px/2 }

Slide 23

Slide 23 text

TRACKING (LETTER-SPACING)

Slide 24

Slide 24 text

TRACKING (LETTER-SPACING) 16px 24px

Slide 25

Slide 25 text

TRACKING (LETTER-SPACING) 16px 24px

Slide 26

Slide 26 text

UPPERCASE • More tiring and slower to read because it reduces recognition by making all letters a similar size. • Ensure uppercase is a style, not forced by copy: .element { text-transform: uppercase; }

Slide 27

Slide 27 text

OVERFLOW .element { text-overflow: ellipsis; }

Slide 28

Slide 28 text

HEADINGS ARE IMPORTANT

Slide 29

Slide 29 text

EMPHASIS http:/ /alistapart.com/

Slide 30

Slide 30 text

SPACE http:/ /au.burton.com/on/demandware.store/Sites-Burton_AU-Site/default/Team-Riders

Slide 31

Slide 31 text

COLORS http:/ /csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/

Slide 32

Slide 32 text

HORIZONTAL SEPARATION http:/ /www.deakin.edu.au/study-at-deakin/find-a-course/creative-arts

Slide 33

Slide 33 text

SANS-SERIF VS. SERIF

Slide 34

Slide 34 text

SANS-SERIF VS. SERIF Ff Ff SANS-SERIF SERIF

Slide 35

Slide 35 text

SLAB SERIF Ff Ff SLAB SERIF SERIF * slab serif is still technically a serif font

Slide 36

Slide 36 text

USAGE STATISTICS SANS-SERIF SERIF HEADING 60% 40% BODY COPY 66% 34% http:/ /www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/

Slide 37

Slide 37 text

MIX IT UP Ghostface Killah ! Dennis Coles (born May 9, 1970), better known by his stage name Ghostface Killah, is an American rapper and prominent member of the Wu-Tang Clan. After the group achieved breakthrough success in the aftermath of Enter the Wu-Tang (36 Chambers), the members went on to pursue solo careers to varying levels of success. Ghostface Killah ! Dennis Coles (born May 9, 1970), better known by his stage name Ghostface Killah, is an American rapper and prominent member of the Wu-Tang Clan. After the group achieved breakthrough success in the aftermath of Enter the Wu-Tang (36 Chambers), the members went on to pursue solo careers to varying levels of success.

Slide 38

Slide 38 text

THERE’S EVEN MORE http:/ /typedia.com/learn/only/typeface-classifications/

Slide 39

Slide 39 text

NOTES ON FONT TYPES • Sans-serif is easier to read at smaller sizes (on screen) • Serif is easier to read at larger sizes • Many sans-serif fonts have been created speciﬁcally for electronic displays • Don’t use too many different styles (sans-serif, serif, slab serif at once) • It’s whatever you’d like!

Slide 40

Slide 40 text

EM VS PX

Slide 41

Slide 41 text

Slide 42

Slide 42 text

M 1em

Slide 43

Slide 43 text

It’s a unit that is relative to its parent font size.

Slide 44

Slide 44 text

target context = result

Slide 45

Slide 45 text

24px 16px = 1.5em

Slide 46

Slide 46 text

EM • Flexible (grows with context) • Changes font size with zoom (on olddddd browsers) • You’ll die if you hate maths • It’s pretty complicated to keep track of

Slide 47

Slide 47 text

REM

Slide 48

Slide 48 text

ROOT EM

Slide 49

Slide 49 text

target root = result

Slide 50

Slide 50 text

REM • Still flexible (grows with top level context) • Less flexible to control specific areas of design • Doesn’t work on old browsers so who cares • Easy to keep track of

Slide 51

Slide 51 text

FONT FAMILIES

Slide 52

Slide 52 text

Nerds, Mozilla Developer Network The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be speciﬁed for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.

Slide 53

Slide 53 text

FONT FAMILIES .element { font-family: Arial, Helvetica Neue, Helvetica, sans-serif; } .element { font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif; }

Slide 54

Slide 54 text

CHOOSING YOUR WEBSAFE FONTS

Slide 55

Slide 55 text

http:/ /en.wikipedia.org/wiki/Core_fonts_for_the_Web BORING, BUT GOOD.

Slide 56

Slide 56 text

http:/ /www.google.com.au/trends/explore#q=websafe%20fonts ON ITS WAY OUT

Slide 57

Slide 57 text

CSS FONT STACK http:/ /www.cssfontstack.com/

Slide 58

Slide 58 text

@FONT-FACE

Slide 59

Slide 59 text

Nerds, Mozilla Developer Network The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.

Slide 60

Slide 60 text

FONT FAMILIES .element { font-family: “Bitstream Vera”, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: "Bitstream Vera"; src: url(“https://mdn.mozillademos.org/files/2468/ VeraSeBd.ttf”); }

Slide 61

Slide 61 text

FONT FAMILIES .element { font-family: “Bitstream Vera”, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: "Bitstream Vera"; src:local(“Bitstream”), local(“Vera”), url(“https://mdn.mozillademos.org/files/2468/ VeraSeBd.ttf”) format('truetype'); }

Slide 62

Slide 62 text

SUPPORT WAS CRAZY http:/ /www.stunningcss3.com/resources/fontface-file-types-browser-support.html

Slide 63

Slide 63 text

SUPPORT IS NOW GOOD http:/ /caniuse.com/#search=woff

Slide 64

Slide 64 text

FONT FAMILIES .element { font-family: MyFontFamily, Arial, Helvetica Neue, Helvetica, sans-serif; } ! @font-face { font-family: MyFontFamily; src: url('myfont-webfont.eot?#iefix') format('embedded- opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }

Slide 65

Slide 65 text

CHOOSING YOUR FONTS FROM AN INSANELY LARGE LIST OF OPTIONS

Slide 66

Slide 66 text

WHERE TO GET KILLER FONTS • Google Fonts - http://www.google.com/fonts • Font Squirrel - http://www.fontsquirrel.com/ • MyFonts - http://www.myfonts.com/ • TypeKit - http://typekit.com/ • Hoeﬂer & Co. - http://www.typography.com/