Take your stinking paws off my design you damn dirty developers

Transcript

1. Take your stinking paws off my design you damn dirty developers Andrew Clarke McrFRED January 2014
2. speakerdeck.com/malarkey @malarkey
3. “ ” Take your stinking paws off me you damn dirty ape
10. Elements Captions Headings Labels Legends Lists Paragraphs Quotations Small Tables Classifications Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles It can help designers and developer to design type styles for common elements and classifications.
14. http://goo.gl/9jRbK
15. 21 a 24 a 36 a 48 a 14 a 16 a 18 a 12 a 11 a 10 a
16. 21 a 24 a 36 a 48 a 14 a 16 a 18 a 12 a 11 a 10 a
17. 21 a 24 a 36 a 48 a 14 a 16 a 18 a 12 a 11 a 10 a
18. Decide on type sizes before opening Photoshop by testing on devices.
19. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising. The original series was followed by Tim Burton’s remake Planet of the Apes in 2001 and the reboot Rise of the Planet of the Apes in 2011. In 2001, Planet of the Apes was selected for preservation in the United States National Film Registry by the Library of Congress as being “culturally, historically, or aesthetically significant.” The measure The measure’s the name given to the width of a body of type. This type is too wide to read comfortably.
20. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising. Increasing the type size also alters the measure. This type is still uncomfortable to read for long periods.
21. An optimum measure is 2-3 alphabets or 52-78 characters (including spaces.) This measure is 57 characters. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
22. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising. To improve readability, we should always also adjust line-height when we alter the measure.
23. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising. When line-height isn’t optimal—either too loose or too tight—we need to concentrate to find the start of the next line.
24. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising. Here’s that ‘too tight’ line-height again.
25. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. The film was groundbreaking for its prosthetic makeup techniques by artist John Chambers, and was well received by critics and audiences, launching a film franchise, including four sequels, as well as a short-lived television show, animated series, comic books, and various merchandising.
26. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. We often see line-height that’s too loose in boxes, narrow columns and sidebars.
27. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. Again, our eyes must consciously search for the start of the next line,
28. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. Here’s that ‘too loose’ line-height again.
29. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. Tightening line-height in narrow spaces can dramatically improve readability.
30. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. Reversing out It’s important to write different styles for reversed-out content. Here’s a normal paragraph of text.
31. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. When reversing out (eg white text on black) this text becomes more difficult to read.
32. So increase line-height, in this case from 1.3 to 1.4. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
33. Also, increase the ‘tracking’ (spacing) between words. We can do that using CSS. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox.
34. p { line-height : 1.3; } .reversed p { line-height : 1.4; word-spacing : 1rem; }
35. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. Another thing to remember; sans-serif typefaces generally require looser line-height.
36. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and released by 20th Century Fox. Whereas serif typefaces generally benefit from tighter line-height.
37. - Typographically correct dashes Let’s turn our attention to using typographically correct glyphs. We’ll start with a common hyphen.
38. Use a hyphen to break words over two lines. Planet of the Apes is a 1968 American scie- nce fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced by Arthur P. Jacobs and relea- sed by 20th Century Fox.
39. short-lived Or to combine two or more words.
40. – An en dash
41. Pages 90–100 Use an en dash to denote a range. Ages 9–10 May–August 1967 Earth–Mars
42. HTML: – – Mac: Alt + - Windows: Alt + 0150 Use an en dash to denote a range.
43. — An em dash
44. Use an em dash to denote a pause, or a separate train of thought within a sentence. Taylor is recaptured by gorillas and — his injured throat now healed — shouts “Take your stinking paws off me, you damn dirty ape!”
45. Separate em dashes with hair spaces or no spaces at all depending on the typeface. (This slide contains a deliberate mistake. More on that in just a moment.) Taylor is recaptured by gorillas and — his injured throat now healed — shouts "Take your stinking paws off me, you damn dirty ape!"
46. HTML: — — Mac: Alt + Shift + - Windows: Alt + 0151 Use an em dash to denote a pause, or a separate train of thought within a sentence.
47. Hairspace   one-tenth to one- sixteenth of an em Thinspace   one-fifth of an em Here are the typographically correct entities for spaces.
48. Two adjacent em dashes can be used to indicate missing letters in a word. ape sh——
49. ' Typographically correct quote marks Let’s talk about something else that I go ape sh—— about. This is a prime.
50. " Here’s a double prime.
51. 5' 11" (distance) Use single and double primes for feet and inches. (This is the standing height of a gorilla.)
52. 5' 11" (time) A single prime can also denote minutes while a double prime can denote seconds.
53. " " But what primes should not—no, not ever—denote are quotations.
54. “ ” Quotes are generally curly, they look like sixes and like nines.
55. HTML: “ “ Mac: Alt + [ Windows: Alt + 0147 These are the correct entities for double ‘curly’ quotes. HTML: ” ” Mac: Alt + Shift + [ Windows: Alt + 0148 “ ”
56. HTML: ‘ ‘ Mac: Alt + ] Windows: Alt + 0145 And the correct entities for single ‘curly’ quotes. HTML: ’ ’ Mac: Alt + Shift + ] Windows: Alt + 0146 ‘ ’
57. … An ellipsis
58. HTML: … … Mac: Alt + ; Windows: Alt + 0133 An ellipsis is not three periods. It just isn’t.
59. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. All too often in body text, we see paragraphs that are too loosely spaced. That’s because margin-bottom’s been set at a full line’s height. In this case that’s 1.5em.
60. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. In long-form text, can improve readability by reducing margin-bottom to half of one line.
61. p { margin-bottom : 1.5em; } article > p { margin-bottom : .75em; } Reduce margin-bottom by half for long-form text, for example within articles.
62. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human- like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human- like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Here’s a comparison, a full line’s height between paragraphs on the left, a half line on the right.
63. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. The apes have assumed the role of the dominant species and humans are mute creatures wearing animal skins. Designers might also choose to indent, rather than space. Never do both and never indent the first paragraph in any section.
64. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor • Roddy McDowall as Cornelius • Kim Hunter as Zira • Maurice Evans as Dr. Zaius The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Let’s talk about the typographic detail that causes the most arguments between me and my clients. Look at the unordered list above,
65. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor • Roddy McDowall as Cornelius • Kim Hunter as Zira • Maurice Evans as Dr. Zaius The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. See how, when your eye’s finished reading a line, it takes a fraction longer to find the start of the next as the list isn’t flush with the left reading edge.
66. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor. Heston was an American actor and • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy" • Kim Hunter as Zira. Hunter was an American film, theatre, and television • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. political activist. As a Hollywood star he appeared in 100 films over the course of 60 years. McDowall was an English actor, director, photographer and voice artist. actress. She won both an Academy Award and a Golden Globe Award. interpretations of Shakespearean characters. Longer sentences inside lists only make matters worse.
67. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor. Heston was an American actor and • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy" • Kim Hunter as Zira. Hunter was an American film, theatre, and television • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. political activist. As a Hollywood star he appeared in 100 films over the course of 60 years. McDowall was an English actor, director, photographer and voice artist. actress. She won both an Academy Award and a Golden Globe Award. interpretations of Shakespearean characters. These tiny decisions make reading more difficult.
68. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor. Heston was an American actor and political activist. As a Hollywood star he appeared in 100 films over the course of 60 years. • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy" McDowall was an English actor, director, photographer and voice artist. • Kim Hunter as Zira. Hunter was an American film, theatre, and television actress. She won both an Academy Award and a Golden Globe Award. • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his interpretations of Shakespearean characters. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Instead, preserve a clean left reading edge by placing markers in the margin.
69. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor. Heston was an American actor and political activist. As a Hollywood star he appeared in 100 films over the course of 60 years. • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy" McDowall was an English actor, director, photographer and voice artist. • Kim Hunter as Zira. Hunter was an American film, theatre, and television actress. She won both an Academy Award and a Golden Globe Award. • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his interpretations of Shakespearean characters. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. This makes reading easier and the page looks better too.
70. ul, ol { list-style-position : inside; margin : 3em 0; } @media(min-width:48em) { ul, ol { list-style-position : outside; margin : 1.4em 0; } } However don’t place markers in the margins on small screens. There, margins are usually too narrow.
71. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor • Roddy McDowall as Cornelius • Kim Hunter as Zira • Maurice Evans as Dr. Zaius The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Instead, double top and bottom margins.
72. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars: • Charlton Heston as George Taylor. Heston was an American actor and political activist. As a Hollywood star he appeared in 100 films over the course of 60 years. • Roddy McDowall as Cornelius. Roderick Andrew Anthony Jude "Roddy" McDowall was an English actor, director, photographer and voice artist. • Kim Hunter as Zira. Hunter was an American film, theatre, and television actress. She won both an Academy Award and a Golden Globe Award. • Maurice Evans as Dr. Zaius. Evans was an English actor noted for his interpretations of Shakespearean characters. The film was released on February 8, 1968, in the United States and was a commercial success, gaining $32,589,624 at the international box office. Then change those margins at a wider breakpoint.
73. Planet of the Apes © 20th Century Fox. Let’s move onto some typography details, in particular the copyright symbol from the site’s footer.
74. of the Apes © 20th Centu Notice how the outer circle sits on the baseline, making the inner ‘c’ appear too high. We can fix that with a little baseline shift.
75. of the Apes © 20th Centu Shift the copyright symbol to slightly below the baseline, part way between the circle and inner ‘c.’
76. <span class="copy">&#169;</span> .copy { position : relative; top : .08em; } This is precisely what CSS relative positioning was intended to achieve. This technique does require an extra element, but the devil is always in the details.
77. of the Apes © 20th Centu of the Apes © 20th Centu Compare the original, non-shifted symbol (above) with the baseline shifted alternative (below.)
78. Charlton Heston ( ) Notice how the large parentheses fall below the baseline and have a strange relationship to the letter ‘C?’ We can fix that with baseline shift too.
79. Charlton Heston ( ) Shift the parentheses up to just below the baseline and reduce their size. By how much will depend on the typeface.
80. <span class="parenthesis">(</span> Charlton Heston <span class="parenthesis">)</span> .parenthesis { position : relative; font-size : 88%; top : -.08em; } This technique does require an extra element.
81. Charlton Heston ( ) Charlton Heston ( ) Compare the original, non-shifted parentheses (above) with the baseline shifted alternatives (below.)
82. Pages 90–100 Pages 90–100 Has it ever bugged you that a dash sits a little too close to the baseline?
83. Pages 90<span class="dash">&#8212;</span>100 .dash { position : relative; top : -.08em; } Let’s shift those too.
84. Brand Name By Author's Name Design Persona Let’s talk about how we start a design process. We often work with clients on a ‘design persona interview’
85. Overview Write an overview of the brand personality. If your brand were a person, who would it be? Maybe you have a mascot which already is the visual representation of the brand personality. If so, describe its traits and how that relates to the personality you want to convey. Start by asking who our personality would be?
86. Overview Freddie Von Chimpenheimer IV is the face of MailChimp, and the embodiment of the brand personality. Freddie's stout frame communicates the power of the application, and his always on the go posture lets people know this brand means business. Freddie always has a kind smile that welcomes users and makes them feel comfortable and at home. The cartoon style lets people know that MailChimp offers a fun, and informal experience. Freddie like to crack jokes, but when the situation is serious, the funny business is out the window. MailChimp often surprises users with a funny easter egg, or a link to a goofy YouTube video. Fun is around every corner, but never in the way of the workflow. Ours is based on a questionnaire shared by MailChimp.
87. Brand Traits FUN but not childish FUNNY but not goofy POWERFUL but not complicated HIP but not alienating List 5-7 traits that best describe your brand along with a trait that you want to avoid. This will help those designing and writing for this design persona create a consistent personality while avoiding the traits that would take your brand in the wrong direction. Here are some examples: Asking about ‘traits’ is amazingly helpful in understanding how a customer feels about their brand.
88. Visual Lexicon COLOR Describe the color palette the design team might use when creating the interface. What types of color would be used and why? TYPOGRAPHY Describe the kinds of typography the design team might use when creating the interface. What type faces would be used and why? GENERAL STYLE NOTES Provide general notes about design style, textures, imagery, and other elements that may be important to shaping the design persona. These brand traits are clues to visual attributes that we can bring into our design ‘atmosphere.’
90. Pairoo chose Anne Hathaway and Ben Affleck. To them Hathaway signified contemporary elegance.
100. Evolve Beyond Gabrielle Benefield Flexible Contracts Outcome Delivery Hot Housing
102. Here’s a technique that I’ve been using since, well, forever. Make two strips, one black, one white, each 200x50px or a multiple of.
103. 100% 100% 75% 50% 25% 25% 50% 75% Overlay four squares filled with your chosen colour onto both strips. Then change the opacity of each square to create a ‘tint.’
104. Use a limited colour palette and use tints to create a harmonious scheme from only one or two colours.
107. We often create colour palettes from photographic research.
108. 100% 75% 50% 25% This technique has served us for over a decade.
117. Compare the interaction colours on the left with the same colours as seen by a person with ‘deuteranopia.’
118. Next compare those interaction colours on the left with the same colours as seen by a person with ‘protanopia.’
119. We should consider supporting colour differences with texture and other distinguishing features.
121. Gridset helps to teach that we often need more than one grid.
122. So we should think carefully about how we design different grids for different breakpoint classifications.
123. Especially at the smallest sizes as it’s a mistake to think that small screens only require one column.
124. Related to layout; it’s important to keep proportions relative to the screen or viewport size. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox.
125. For example, don’t forget to increase both margins and padding as sizes become larger. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox.
126. The film tells the story of an astronaut crew who crash-land on a strange planet in the distant future. Although the planet appears desolate at first, the surviving crew members stumble upon a society in which apes have evolved into creatures with human-like intelligence and speech. Planet of the Apes is a 1968 American science fiction film directed by Franklin J. Schaffner, based on the 1963 French novel La Planète des singes by Pierre Boulle. The film stars Charlton Heston, Roddy McDowall, Maurice Evans, Kim Hunter and Linda Harrison. It was the first in a series of five films made between 1968 and 1973, all produced byArthur P. Jacobs and released by 20th Century Fox. Layout can influence many aspects of a design, from proportions right back to typography.
127. .content { padding : 0 5%; } @media(min-width:48em) { .content { padding : 0 10%; } } @media(min-width:64em) { .content { padding : 0 15%; } }
128. p { font-size : 1.8rem; } @media(min-width:64em) { p { font-size : 2.1rem; } .secondary { font-size : 1.8rem; } .tertiary { font-size : 1.6rem; } }
131. “ Get your stinking paws ‘on’ my design you damn dirty developers
136. Thanks @malarkey