 my name is Marcin. And I'm Dustin Cinos. And we're here to talk to you today about some of the struggles and trade-offs we've had at Medium when designing for type. Give you a little bit of context. Medium is an online publishing platform. You may have seen some of our more popular articles around the web and we're going to talk about direction versus choice first off. So Medium was founded by Evan Williams who originally founded Twitter and Blogger and there's many, many people that publish on Medium. There's amateurs, there's professionals, anyone can sign up and create an account. And in that there's a lot of struggles with what we allow people to do and how we allow people to actually enter text on our website. So one major feature of Medium is our editor. And you can see on the right, this is our composition screen when you're in your desktop browser. We very particularly chose the options that you have when you're in the editor. So it's not like a typical word editor where you can see a whole bunch of options across the top of the screen. This only pops up when you've actually highlighted the text. And we do a lot of fancy things with the editor which I'll show in a little bit. This is the components that we allow you to use in the editor. So the top is our H1, to our H2, to our H3, a quote and our body copy. In that we chose the direction of being very specific about the characters that you can use in the editor. So you can see here Marcin is typing and it will automatically correct prime quotes, the curly quotes for Mali's typing. If he types in a number, it's going to use the proper prime code. If he types in a space hyphen space, it's going to actually convert that for an M dash for him automatically. It'll actually hang quotes for him as well if the quote starts on the initial line, which you can see here. And we've done this to try to enable the most people to use our editor to actually set very nice type without having to know how to do this. So you can see on the left, this is typically what someone will type in without knowing how to do the proper key commands or properly use curly quotes. On the right, this is what medium will auto correct. With that, you can see on the far right, we're not being sensitive to different cultures. So the top is German quotes, the middle one is UK's full width space and dash full width space and then like a more classic spaced out ellipses. So yeah, these are some of the challenges we have on the, on that axis. We also have another thing that we spent a lot of time thinking which is the challenges of craft and versus upkeep. So let me give you an example. A lot of medium people read in their browsers. And this is what we saw a couple of months ago when we opened medium on Chrome, which is one of the most popular browsers, which is those really horrendous thick underlines which you can see, which especially if you have a post or a story that has a lot of underlines, it just draws a lot of attention to links and we decided we need to redesign them because this is, you know, we can't tolerate that. So eventually what we arrived at was the thing you see at the bottom, which we thought was much better underlines and you know, much less prominent and kind of fit medium very well. But that journey takes us a long of a lot of time. And we started with this building tools. One of the tools we built was just a tool to design a proper underline. So here, I can for example, you know, choose the position, choose the width of the, of the underline and actually how far should it be from the senders, right? So it could touch them or it could go far away. And at the top, you actually see it in situ with 22 pixel fry text, which we use for body form. That was actually one of the easiest parts, you know, getting the underline right. The harder part was taking care of all of the edge cases and all of the different situations when the underlines appear. So this is a regular text. Sometimes it goes through the senders. This is one problem right there. Sometimes it breaks to the next line, which is yet another big technological problem. We have H1s and H2s which probably deserve their own style of underlines. We have pool quotes, we have image captions. And a lot of those things on medium can also appear on dark backgrounds, which means we cannot just naively reverse it, right? We have to design for white underlines as well. And then there's other browsers. Each browser you can see now natively renders underlines very differently and that's unacceptable to us because we want those underlines to be great under all of the circumstances. So now we have to design all of these underlines for at least four browsers. Some of them on retina displays, some of them on non-retina displays. People read medium on tablets and phones in addition to desktops, so that creates more and more options. And then we also introduce a native iOS app first from the iPhone, which also doesn't use HTML and CSS. So now we have to do it in a completely different environment. And then right here for retina and non-retina, we also had an iPad app. So same thing happens for iPad and iPad mini because they come in different sizes. Here's actually a photo of a strength to figure out, you know, whether actually iPad mini and iPad should have different phone sizes because they're different physical sizes of the devices. So we could do that, right? We could spend a lot of time designing all of these underlines for all these different situations, all these permutations. The challenge with that is that, A, that's going to take a lot of time to do. And B, later on, it's going to take a lot of effort to maintain. Because none of this is set in stone. We're going to have more devices coming down their own, more browsers, more sorts of different screens. So a lot of challenges is actually now paring it down and thinking, you know, what's the underline we absolutely cannot live without? And that's probably the body text underline. And what are the other things that we can maybe leave off some of the craftsmanship and just, you know, use simple formulas or whatever. So maybe they won't look as great, but at least it's going to be something that won't take weeks and weeks and weeks and like full-time job later to maintain because nobody, none of us does it for, you know, as a full-time job. And then there's the other thing that we care a lot about which is speed. Both reading your story as fast as possible so it goes, comes down the wire or the ether or whatever as quickly as possible and also that it's rendered or displayed as quickly as possible. We care a lot about actually getting to your story quickly. And here we actually have monitoring on fonts because this is kind of the problem that we have that more nuanced typography, more font features, more fonts, nice ligatures, all of sorts of open-time things. That's going to mean they're going to take longer to load. And you know, if you're on a 3G device or whatever, that's a little bit of a harder problem. Here's one example. Some of you might already see what's wrong with this. This is a two-sentencing polish which happens to be my native tongue. The diacritics are almost up because we cannot afford to send a really proper version of the font with all of the diacritics because it's just too big, too expensive, too heavy. It's too many kilobytes for every user to follow. So instead when we detect language that we don't support some of the characters, we just default to a regular browser font which is horrible, right? For us. But we need to do it because there's no good solution to do the above yet. And we're working very hard to make it happen so that we could have the cake and eat it, too. Actually a lot of my work sometimes is spreadsheets like this when font weight could mean a thin black or bold font, but it also could mean how big the font is in terms of kilobytes. And those are the kind of calculations we have to do all of the time to make sure we don't generate a page. It's just incredibly slow to load. To the point that one of my biggest accomplishments medium was getting rid of one of the fonts, which was Bernino Sun 600, which was used very rarely in only like two or three places in the user interface. And we decided it's better to save the 20-something kilobytes, which multiplied by tens of millions users every month means actually a lot. It was better than just preserve this one typography nuance. And there's also the speed of rendering it on the page. So here's this underline that we maybe we like so much, right? The only way to do the underline in HTML and CSS, you can just draw the line, because the whole piece is simple. The underline is actually a gradient. So you can see now that we take a gradient, which is a CSS feature, and we just make it pretend it's a line, which is kind of ridiculous when you think about it. This is the only way to do it so we have all of the control we want. And in order to have those spaces around the senders, there's no way to make a space around the senders. What you have to do is draw the text again in the color of the background on top of that line a couple of times to pretend there's a space, which is kind of ridiculous, right? And it kind of works here, you know, if I just do seven characters, it's fast enough and it works really well. Now imagine this in a long, long article with full of links, right? That would be really, really slow. So for example, we couldn't do the sender clearing because we feared it's just going to be really, really slow in some of the situations. So this is some of the kind of decisions we have to make on that front. Awesome. You've heard some of the struggles we've been facing at Medium with trying to get type is absolutely beautiful as possible. And we do this because we believe it's important to preserve the richness of typography before web browsers came around. It shouldn't be this hard to do this. It's like it's ridiculous that we need to multiply type on the page to clear the senders. But we really value that. We really, because people come to Medium and write and they're not all perfect at type typography and they don't notice a lot of this. We feel it's very, very important for us to like keep pushing this. So when they publish, oftentimes they don't know exactly why what they're writing feels better or looks better, but they tell us that what they love, what they make on Medium. So it's super important to us. And at Medium, we have like an ongoing checklist of things we want to do. So this was our task list maybe about a month ago. And it keeps growing. We have a ton, a ton left to do. And it's super exciting because it's like a blend of typography and design and engineering that we can like help figure this out and help try to push, push forward with this. The company we work at gives us the space to do this and to focus on this typography. And we, we feel like it's for a few different reasons that this happens. One being that we're very passionate about typography. We're about four designers and 35 engineers or so. And everyone at the company is very passionate about typography. And Marcin and I and other designers take time to present on things like this, such as, you know, the difference between line height and why it used to be called letting, different hyphens, the origins of the ampersand and even funny things like the zero width space which will occasionally throw in our apps and it throws all the engineers off when it throws bugs. But it's quite entertaining for us. We also write. This is an internal version of our publishing platform with articles that we've written to kind of share knowledge about underlines. And most recently on the right you can see we've properly lined up the left sides of Bernino which is fantastic that got shipped a few weeks ago which made us very happy. We also publish externally. This is an article we wrote about crafting the other lines that Marcin just presented on and we published this and much to our surprise it got 72,000 views. Like that was amazing to us that people would actually take the time to read something about something as simple as an underline online. We also build tools for ourselves to make it easier for us to experiment with typography. And I wanted to share two of them with you. One is going back to the diacritics and all sorts of things. We actually build tools to see for example if I type in check or you know maybe in finish what's the support I'm getting for all these diacritics in all sorts of different versions of you know typekit, the simple character set and rich character set native fonts and fallback fonts and I can you know even check some of the ligatures or you know some of the glyphs. If you want to do some auto-replacement with nice typography we can't auto-replace the character that doesn't exist in a typeface that we support right so that's very important for us and again this is something that we didn't see existing anywhere so we thought it would be interesting to build one. We also built a fake medium just to preview typography. So here I have this thing and we kind of build it as a little bit like a Bloomberg terminal thing so there's a lot of keyboard shortcuts so I can just point to this and you know change the lighting, change the tracking a little bit, you know make the font bigger, italicize it if I want to. There's all sorts of different shortcuts that are listed here, you know capitalize it if I want. Then you know look at how it feels very quickly preview all sorts of different articles maybe it's a bigger article something much more heavy and I feel like oh this maybe deserves a little bit of a bigger thicker headline here a poem, a letter and all sorts of versions maybe of headlines. You know how would they feel? Very important for us to be very quickly able to kind of preview all of these things. Press space to see how it compares with the current medium and even if you're so interested you can take a phone just from your desktop and drag it and preview it in the setup here just because again we wouldn't do it in production because obviously the licensing is very different but we are able to play with it really quickly and these are some of the tools that we built for ourselves we're actually interested in if anybody of you thinks this would be interesting tools to have outside if so please talk to us and we can definitely open source them or put them up because it's important to give back and the last part typography is a lot of fun for us and that's kind of something we don't forget and we want to also share it within and without the company so we actually build this dedicated space which we called white space and our office for typography so there's a lot of books there's whiteboards there's some posters we have people coming actually tried lettering which is kind of awesome nobody makes anybody do that and they try to do lettering as you can imagine only black and red pens are allowed in white space we even had our cof williams say oh I saw this poster in the mission which is one of the neighborhoods in our school I thought it would fit well in in white space so it's kind of cool that everybody kind of chips in and gets interested in that we also have fun in many other ways this is an internal document and you know we had this discussion about should strings in our user interface be title case or sentence case and and we thought we're gonna nail it we're gonna figure it out once and for all we're gonna you know take care of all the edge cases and and all sorts of corner cases and we gonna know exactly when to use switch capitalization we put this comprehensive document just use sentence case everywhere that's it and we thought you know it's something that nobody really cares about usually but we do and we just said you know just go for it and we're not above bribing people either which is kind of fun in red you can see circled there's double spaces which kind of slipped through our filters so we offered any engineer who could go through all the posts in our system and remove those some mochi ice cream so I think that was actually successful and they did which was quite entertaining one thing we've noticed is that people are noticing the type changes we've made which is really fun to see other people in the world notices we've been building websites for many years now and I remember when I first started no one would really talk about typography on the web because it was so difficult but now thanks to typekit and the modern browsers we can actually do this so you know sometimes it's positive and sometimes it's negative which is wonderful one of my favorite is medium spending one million dollars developing the perfect underline which is clearly not true but that's I enjoyed his sarcasm about that yeah and and we what's really great is to see people from outside medium talking about typography and criticizing it and sometimes being excited about it and we also have this internally and it's great to see for example gene one of our engineers once in a while she just sent me this email saying like is this quotation right is this ellipsis right and it's just fun to see people who normally don't care about typography do that and sometimes it leads to actually improvements in typography and the last thing I wanted to show you was when we started fixing the underlines all of these months ago you know I send my code change to one of the engineers Jacob pictured there and he was like this is crazy this is so much CSS it doesn't make any sense you're just fixing one line right why are you doing this and he's completely right it was crazy thing to do it was a lot of code but throughout the next month by the way this is all site project we have other jobs to do not just a hurry but throughout this month he was like helping me make it better and faster and more maintainable to the point in a month later he was the person who said hey you should write a post like this was kind of an awesome thing that we did and we were proud of it and we learned a lot and I think other people could benefit from that or could maybe even improve it further which is what happened so he said we should write about this and it was kind of an amazing thing so yeah this is all we wanted to share with you please this is our tweets and we have an email address typography at medium.com if you have any thoughts any comments any feedback positive or negative please send it to us we do care about that and we're also going to be around if you want to talk to us about any of the things or anything else thank you so much thank you