Just Enough Typography
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Part Number | 49 | |
| Number of Parts | 52 | |
| Author | ||
| License | CC Attribution - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/32704 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
DjangoCon US 201649 / 52
6
10
13
14
17
20
23
31
36
44
46
47
48
49
00:00
RootComputer animation
00:19
AbstractionSpacetimeRaw image formatLine (geometry)VarianceDemosceneAreaType theoryGraphics tabletFamilyHypermediaElement (mathematics)Multiplication signBitMarginal distributionComputer fontMathematical optimizationRing (mathematics)PixelHand fanTouchscreenNumberLimit (category theory)Mobile WebFrequencyBit rateReading (process)MereologyMathematical analysisCausalityProjective planeAdditionWeb 2.0Observational studyPoint (geometry)QuicksortSampling (statistics)Instance (computer science)Endliche ModelltheorieWeb pageRange (statistics)Semiconductor memoryUtility softwareRight angleState of matterMessage passingExecution unitProduct (business)InformationPattern languageWebsiteContent (media)Formal languageTheoryExpressionDistanceView (database)Sign (mathematics)Game controllerDevice driverSpherical capMappingCASE <Informatik>Computer clusterAuthorizationComputer animation
10:18
TwitterFile formatStorage area networkSound effectWordCodeLine (geometry)Inheritance (object-oriented programming)State of matterTheory of relativityPhysical lawDistanceControl flowComputer fontMereologyTouch typingRight angleWebsiteContrast (vision)Multiplication signNeuroinformatikPoint (geometry)SpacetimeBlock (periodic table)Keyboard shortcutQuicksort1 (number)HierarchyNP-hardDifferent (Kate Ryan album)ConsistencyWeightSelf-organizationFrequencyRow (database)Stress (mechanics)EllipseVisualization (computer graphics)Computer clusterMultiplicationDot productWeb 2.0Medical imagingPlastikkarteCross-correlation10 (number)CodeFamilyRegular graphNetwork topologyVariety (linguistics)Search algorithmType theoryHidden Markov modeloutputSubject indexingTheoryPatch (Unix)Tablet computerExecution unitCharacteristic polynomialRule of inferenceGraph coloringTape driveWrapper (data mining)Ring (mathematics)Field (computer science)Content (media)Set (mathematics)MassRange (statistics)Single-precision floating-point formatGreatest elementCellular automatonCASE <Informatik>Design by contractSoftware developerComputer animation
20:18
Computer animationJSONXML
Transcript: English(auto-generated)
00:00
Nice to meet all of you. I'm incredibly nervous.
00:22
You're not supposed to say that. I really don't care. Luckily, I see a lot of familiar faces, which is great. When I was rehearsing this in my head, I was talking to four imaginary people, which I see now that was not realistic at all.
00:43
So, let's just get started. We're going to learn a bunch today in this really quick time together. This talk is about knowing just enough topography to produce a really delightful reading experience on the web. So, we're not going to talk about the anatomy of type,
01:02
even though I have an awesome poster about that, or all the terminology associated with topography in general. This is for people who want to finish their side projects on their own, or fill in the gap when a designer is out sick. I think my abstract says something about them going crazy or something.
01:23
It's probably more likely. I just like to be super honest. This is how I'm going to spend your time. This is a high-level look at what we're going to be talking about. What is it, though? Topography is what language looks like.
01:43
It's the art and technique of displaying text in a way that is delightful and easy to read. It's not strictly visual or aesthetic. It's utilitarian. It's for anyone who uses text to communicate.
02:04
So, thanks for choosing this talk. It matters a lot. The National Weather Service, really tough yelling at us, raised hands emoji, they were using all caps to communicate forecasts
02:22
and just general messages. It was kind of funny because it's really hard to read. You have this emergency and it takes forever to really understand what's happening. All caps create a very blocky experience and it's hard to distinguish the letters. Also, sometimes it's like,
02:40
it might rain today a little, at like three. Then it's like, that's all it's saying. Your heart rate's going. The world is ending. It just might rain. So, that was a really great thing that happened this year. NASA learned a lot of things. There were some accidents that happened and they did some investigating.
03:02
They found that the design of their documentation and their maps was to blame. So, they did some research and they published a 40-ish page document, delightful reading on lessons learned there. It includes things, they were using a font size
03:21
that was over 50% smaller than recommended. So, people couldn't read it and it didn't encourage reading when they did try to read it. It saves lives. This is really important to talk to people about. Road signs are less terrible now.
03:40
For the longest time, they used a typeface called Highway Gothic. It was very hard to read in the rain and when it was dark and when your light hit it, it would just sort of glare and blur together. So, really, when you needed it the most, it failed you. So, they got some designers to create a new typeface
04:01
and it's called Clear View. It proved to be much better. Reaction times were better, people could read it and there were less accidents and less confusion. Also, studies showed that when they focused on making the controls in the car easier to read,
04:21
less drivers were distracted. So, now there's phones or whatever, so who knows now. So, this is what I was going on about earlier. This is what it looked like before. It's so anxiety-provoking, right? Now, this is the new thing, just saying, you might rain, bring an umbrella.
04:41
These are the street signs I was talking about, a before and after of the different typefaces. Okay, it evokes emotion. So, an awesome example of this is the book with no pictures. I'm sure you've figured this out already, but it has no illustrations at all.
05:00
But it's a really energising book and I brought a copy for all of you to look at because I'm just such a huge fan. But it has a really silly feel to it and it's completely accomplished from topography. So, influencing how users feel is very powerful.
05:22
When we're working on the web, it's a very impersonal medium and we really want to bring our brand across correctly and set the voice and tone. So, it's a great way to express personality and stand out. It's a huge competitor advantage to be able to make someone feel the right way.
05:43
Topography is a great way to express personality and topography is such a great way to sort of pull that off. The safest assumption we can make is that nobody has time to use our products or websites. So, when you use topography, it's a really great way to evoke emotion
06:01
and grab people's attention and make sure that they're getting the important information they need as quickly as possible. It also strengthens memories. So, when someone's using your site and you make them feel a positive way, they're going to remember it and they're going to remember the content better. So, this is especially important
06:21
when you're sort of straying from established mental models in any way. If you evoke emotion, they're going to remember that better. Oh, and this is... The author is actually B.J. Novak and this is him reading his amazing book.
06:42
And this is just... He just threw these in there randomly. This is his top sign. I just love this because it's like, I would not stop at this. It's like a light suggestion. Like, you don't have to. So, I just think that's a really powerful way of showing
07:03
how we can communicate through the typefaces that we choose. Readability and legibility. So, now that I've convinced you all that topography is the most essential thing, we're going to talk a bit about what good topography even means and how to get there.
07:21
Some of these concepts are super straightforward and some of them are a little more invisible, behind the scenes stuff. So, the most important thing, if I could only choose one thing to talk about for 20 minutes, would be the size and the line height of your text. It's really frustrating to come across a site that's incredibly beautiful
07:44
and has the tiniest, tiniest text. You have no idea what it's saying, you have to magnify it. That's really frustrating. So, understanding what size is appropriate for the web is very important. Luckily, some people, much smarter than myself, established them like optimal font sizes.
08:03
It's between 14 and 15 and 24 and 25 pixels. It's really hard to get designers to agree on anything. So, I couldn't get like a straight answer, but that is the general range. Then, of course, the line height is between 120% and 145%.
08:21
Ideally, you're using values like line height 1.5, which is one and a half times the font size that you selected. So, percentages are completely fine, but not best practice exactly. So, when you increase the font size, you have to increase the line height as well
08:41
to ensure optimal legibility. Of course, on mobile, you can make it a little smaller because we hold them much closer to our faces than desktop. Sometimes, I forget my glasses, but that's not really the case. One thing to keep in mind is all these various font sizes have to be within a container that also changes the size.
09:03
So, this little thing I adapted, I put ish in there. That's my little addition because I don't really follow this exactly. So, you just feel it out. If your text takes up the entire screen, it's just too long. It's too hard to follow and scan.
09:22
I left this intentionally blank because I'm talking about white space and I thought it was clever. I see now that that was a mistake. White space is the empty space around elements. So, margins and paddings and line height, also called negative space.
09:42
So, I read this quote once and I'm really bad at remembering who says stuff, which is really rude. The power of white space comes from the limitations of human attention and memory. So, when you use white space well, it helps guide the user through the page and they know what to absorb immediately and what's less important.
10:04
Also, sometimes when you see a site that you love and you can't exactly say why, it's usually because it's an on-point white space utilisation. White space and proximity. So, the law of proximity states that items near each other
10:22
are going to appear related. So, white space is a great way to confirm or deny relationships between text and images. Vertical rhythm. I talked about this a bit already, but basically this is done through setting a baseline.
10:46
So, you set a line height and then you're going to use multiples of that value throughout the site for visual consistency. Designers like to talk about consistency a lot, right? So, this is one way you can make them really happy to show them your vertical rhythm.
11:09
The hierarchy on the web refers to the visual organisation of things by importance through size, proximity and colour.
11:21
Proper hierarchy helps us understand what's important and helps you scan, because we don't really redo it, we scan. We don't have time for that, we're very busy. And repetition and consistency allows for safe assumptions. So, if all the paragraphs on a site are grey,
11:40
and I'm scanning, I'm not reading, and all of a sudden I see a block of orange text, well, that's different, that's not a paragraph. So, that's going to catch my attention, that's going to make me pay attention. But it was safe to assume that that wasn't a regular paragraph. It's also very calming. And it just sort of goes back to what I was saying
12:01
when a site just feels right. Someone's obviously paid attention to the spacing and hierarchy of that site. I find contrast to be especially interesting right now. I've noticed a lot of sites that are using poor contrast intentionally. I don't know why it hurts.
12:23
You'll know it when you see it, it looks like the letters are shaking. If you have migraines, you've, you know, you've missed your computer a few times. But sometimes it's not so obvious. So, it's always safe to use a contrast checker.
12:40
Contrastchecker.com, I believe, is a thing. If it's not, I'm going to grab that. And I was actually working on an example of poor contrast. I gave myself a headache and I was like, why would I do that to them? That is so awful. So, I just didn't, but then I had this space there. And I just filled it for you.
13:04
Okay, I missed this. Use bold or italic, don't use both. Don't use underlines or exclamation points. They lose their effect, right? When it's like every sentence is an exclamation point,
13:20
it's counterproductive. So, when you're using a sans serif, use just bold. Because if you use italic, it's not going to come across that clearly. When you're using a serif, you can use italic for light emphasis and bold for heavier emphasis. And also, just be careful not to overuse.
13:41
That's really the theme here. If you overuse it, it loses its effect. Oh, and one last point. I'm going to take this off. I think it's Twitter or something. It's vibrating and it's really frustrating. When you have something in bold and there's a punctuation at the end,
14:04
don't let that punctuation inherit the formatting of the emphasised text. Hyphens and dashes. Hyphens are the shortest line of the three.
14:23
There's just a keyboard bind for it. Super easy. Hyphens are often not used correctly. They're actually used to just combine multi-part words. So, part-time. There's a hyphen in the middle. In n-dash, you need to use the keyboard shortcut for that,
14:42
where there's an HTML code. An n-dash is the shorter of the two dashes. It's used in date ranges, like from 2000 to 2006. Then to combine, to signal a relationship between words.
15:01
So, love-hate relationship would have an n-dash in there. An n-dash is the longest, most underused, I would say, of them all. This one is to break parts of sentences to create stress on a particular thought.
15:21
You would use an m-dash to separate that. That's often achieved with an ellipsis, like for three periods, instead of an m-dash, which is the proper way to do that. Let's just talk about ellipses now. They're used to indicate omission within quotes
15:41
and not stress-specific thoughts. It has its own little keyboard shortcut. It's actually not three periods in a row. I'm totally guilty of doing that myself, but it's not correct because it won't have the right amount of spacing between the dots. Then space before or after the ellipses,
16:01
you just sort of feel that out. How does that feel to you, if you put a space? Or if you don't have one, is it too cramped? That's up to you. Currently, quotes... I'm focusing on curly smart quotes, and not the straight quotes that are just the keyboard button.
16:23
98% of the time, when you're working with text, you want the curly quotes. That's the actual correct one. When we're talking about codes and tags, that is not the case. We're not talking about that right now. You'll want the curly quotes. They do have a special shortcut and special HTML characters.
16:49
Just one quick note is, when you have a block of text that is in quotation marks, you want it to hang the punctuation, so it's not flush with the text.
17:02
If it's not hung, it just sort of breaks that up and it's harder to read. Selecting typefaces. You'll want to focus on your anchor face, so whatever you're using for the body copy,
17:21
because that's what you have the most of. That's what you focus on when resources are limited, and they always are. The very first thing you want to do is read your content, because you want the typography to match the feel of your content, and match the brand's voice and tone. So you've got to read it.
17:46
When pairing typefaces, most designers will tell you to avoid doing this and just select a typeface that has a lot of different styles. I think that's really not very practical.
18:02
We use Google Fonts a lot. I totally used it for this presentation. When you look at which typefaces have that many different styles, you need at least seven or eight, there's maybe a handful left. I think it was 20 last time I checked, because I did check.
18:22
When you immediately eliminate the ones that are just a little bit silly, and they just don't go with your brand, you're left with a handful. Then, of course, there are countless other sites that are choosing between the same handful of typefaces. There's some things to keep in mind when you're pairing typefaces.
18:41
If you have a serif anchor font, then you're going to want to choose a sans serif for your display. Avoid overlapping moods. Certain typefaces make you feel something. They have certain characteristics, and you don't want too much overlap. If you're going to have two separate typefaces,
19:01
they have to be very different from each other. Of course, a weight contrast is always visually pleasing, and that's just going to be a heavier typeface. So, the thickness of it. There's no hard rules, but I'd say if there was one, it's that you don't want more than two.
19:22
You lose touch with what you're trying to say and what the brand's communicating. The last thing I want to say here is you're not on your own. There's so many resources to help you choose which typeface to use, specifically with Google fonts. These are the two that I used in the presentation.
19:41
They love each other. OK, so, I created a website reference for this talk. So, I have my top ten topography dot tips. I spent no expense with that. I was like, I need that. So, it's my top ten tips, along with the associated resources for those.
20:02
Then there's also a neat part at the end, just neat general links, like that NASA document that you guys are all going to read right now. That's there. So, thank you so much.