WEB TYPOGRAPHY FOR WEB DEVELOPERS. Matej Latin Lead UX/UI Designer at Autotrader.co.uk

Size: px

Start display at page:

Download "WEB TYPOGRAPHY FOR WEB DEVELOPERS. Matej Latin Lead UX/UI Designer at Autotrader.co.uk"

Buck Dean
6 years ago
Views:

1 WEB TYPOGRAPHY FOR WEB DEVELOPERS Matej Latin Lead UX/UI Designer at Autotrader.co.uk 1

2 A MEANINGFUL WEB TYPOGRAPHY STARTER KIT 2

3 Most people think typography is about fonts. Most designers think typography is about fonts. Typography is more than that, it s expressing language through type. Placement, composition, type choice. Mark Boulton 3

4 Hey, I really like that.mp3! Helvetica Typeface Helvetica light.ttf Font (light) Said nobody, ever. Helvetica.ttf Font (regular) 4

5 Macro typography Type size & colour, Measure, Leading, Horizontal rhythm, Vertical rhythm Modular scale, Choosing typefaces, Combining typefaces, 5

6 The reader should be able to read the message of a text easily and comfortably. This depends to a not inconsiderable extent on the size of the type, the length of the lines and the leading. Josef Mueller Brockmann 6

7 Type size & colour Type size and colour depends on the medium, the typeface and the content of the text. 7

8 Type size & colour Type size and colour depends on the medium, the typeface and the goal of the text. 8

9 Type size & colour Type size and colour depends on the medium, the typeface and the content of the text. Colour isn t meant as actual colour but more as a contrast between light and dark. Pure black on white is too high contrast. Something a bit lighter, like #333 should be used for body text. html { font-size: 100%; color: #333; screen and (min-width: 50em){ html { font-size: 1.25rem; //20px } } 9

10 Type size & colour Low-contrast type colour is hard to read. 10

11 Measure Measure is the length of a line in the main body text. 11

12 Measure Measure is the length of a line in the main body text. p { max-width: 80%; margin: 0 auto; screen and (min-width: 50em){ p { max-width: 35rem; } } 12

13 Leading (line-height) Leading is the distance between the lines of text. When the typographers had to hand set type, they used bars of lead to increase it, hence the name. Body text should have a leading from 1.3 to 1.6. Headings should have a leading from 1.1 to

14 Leading (line-height) Leading is the distance between the lines of text. When the typographers had to hand set type, they used bars of lead to increase it, hence the name. Body text should have a leading from 1.3 to 1.6. Headings should have a leading from 1.0 to

15 Leading (line-height) Leading is the distance between the lines of text. When the typographers had to hand set type, they used bars of lead to increase it, hence the name. Body text should have a leading from 1.3 to 1.6. Headings should have a leading from 1.0 to 1.2. * { line-height: 1.4rem; screen and (min-width: 50em){ * { line-height: 1.6rem; } } 15

16 Correlation between size & colour, measure and leading. Size & colour Awesome typography Leading Measure 16

17 17

18 18

19 19

20 20

21 Horizontal & vertical rhythm Horizontal rhythm impacts legibility, vertical rhythm impacts readability and establishes a visual hierarchy. 21

22 Horizontal rhythm Two ways to change horizontal rhythm: tracking and kerning. 22

23 Horizontal rhythm span { letter-spacing: 0.01em; } Two ways to change horizontal rhythm: tracking and kerning. 23

24 Horizontal rhythm span { letter-spacing: 0.01em; } Two ways to change horizontal rhythm: tracking and kerning. 24

25 A man who would letterspace lower case would shag sheep. Frederic Goudy 25

26 A man who would letterspace lower case would shag sheep. h1 { letter-spacing: -0.02em; } Frederic Goudy 26

27 A man who would letterspace lower case would shag sheep. h1 { letter-spacing: -0.02em; }.uppercase.small-caps { letter-spacing: 0.1em; } Frederic Goudy 27

28 No justified text on web! Browsers can t display the justified text as well as text editors, resulting in rivers in text. These affect readability of the text and look ugly. 28

29 Vertical rhythm Leading (line-height) is the baseline for vertical rhythm. When a text is set so it has a proper vertical rhythm everything will look in balance. The text will be easier to read and understand. 29

30 Every margin, every height defined by leading Leading (line-height) of the main body text is the baseline for vertical rhythm throughout the page. This heading has a 2.5 * leading margin-top and a 0.5 * leading margin-bottom. 30

31 Modular scale A modular scale gives meaning and cohesion to typographic styles. Modularscale.com 31

32 Choosing & combining typefaces 32

33 The most popular typefaces are the easiest to read; their popularity has made them disappear from conscious cognition. It becomes impossible to tell if they are easy to read because they are commonly used, or if they are commonly used because they are easy to read. Zuzana Licko 33

34 Anatomy of a typeface X-height is the most important property of a typeface. Typefaces with a higher x-height are commonly easier to read. 34

35 Web-safe fonts don t suck! Georgia, Times New Roman are two beautiful typefaces and they cost nothing both in $ and in Kb. Georgia Georgia by Mathew Carter for Microsoft Times New Times New Roman by Victor Lardent 35

36 Web fonts & FOUT Loading custom web fonts comes with a price but can give you a unique identity. The best practice with FOUT is to just let it be. 36

37 Serif typefaces Serif typefaces are perceived as more traditional and most of them are great for long texts. Interesting fact: People tend to believe in content of texts that are set in Baskerville more than any other typeface. Garamond Adobe Garamond Pro Baskerville Baskerville Bodoni Bodoni URW 37

38 Sans-Serif typefaces Sans-serif typefaces are perceived as modern. Sans-serif literally means without serif. Futura was designer by Paul Renner in 1920s but was the most used typeface on the web in Interesting naming choice. Nimbus Sans Nimbus Sans by URW++ Futura Futura by Paul Renner Proxima Nova Proxima nova by Mark Simonson 38

39 Combining typefaces based on x-height Combining typefaces is one of the hardest things in typography. Combining a serif typeface with a sansserif typeface that have a similar x-height is a good place to start. 39

40 Some typefaces are meant to be together Merriweather Sans Merriweather You really can t go wrong with these. 40

41 Micro typography Ligatures, Small caps, Figures styles, Smart quotes & dashes 41

42 Ligatures Ligatures are multiple letters combined into one shape/symbol. 42

43 Ligatures Ligatures are multiple letters combined into one shape/symbol. 43

44 // Enable ligatures.ligatures { font-feature-settings: "liga" 1; } // Disable ligatures.ligatures { font-feature-settings: "liga 0; } Ligatures Ligatures are multiple letters combined into one shape/symbol. More about ligatures and opten type settings in CSS3 // Enable discretionary ligatures as well.ligatures { font-feature-settings: "liga", "dlig ; } 44

45 Ligatures Ampersand is also a ligature. It s a combination of letters e and t. Et means and in Latin. 45

46 Small Caps Small caps are great to add a bit of sophistication to a typographic style. They should also be used for acronyms in body text. 46

47 // Fake small-caps.allsmallcaps { font-feature-settings: "c2sc", "smcp"; } Small Caps // Real small-caps.smallcaps { font-feature-settings: "smcp" on; // letter-spacing for sophistication letter-spacing: 0.1em; } Small caps are great to add a bit of sophistication to a typographic style. They should also be used for acronyms in body text. 47

48 Figures styles Lining figures are great for numerous numerical values, old style figures are great for body text. Most typefaces come with either of them, rarely both. Linging figures are more common. There s not much we can do about these in CSS but you might think about these when choosing a typeface for body text. 48

49 Smart quotes & dashes Again, not much to do about these in CSS. You have to use the right quotes in HTML. smartquotesforsmartpeople.com 49

50 Smart quotes & dashes There s more than just one hyphen. En and em dash are most commonly used (besides hyphen-minus). More about dashes 50

51 Get it on GitHub BUILT WITH 51

BBN ANG 183 Typography Text colour: vertical and horizontal spacing

BBN ANG 183 Typography Text colour: vertical and horizontal spacing Zoltán G. Kiss & Péter Szigetvári Dept of English Linguistics, Eötvös Loránd University gkz & szp (delg) typo/spacing 1 / 43 outline