 Willkommen zurück, ihr Lieben, auf der R3-S. Welcome back to R3-S stage. The next talk deals with better justification for the web. Why is this important? Because when you type text justification on a website into a search engine and you look at the top results, the general advice is to say, no, don't do it. It's hard to believe the amount of websites is growing every day on one hand. On the other hand, websites are becoming more and more sophisticated and contain more functions. Johannes is a communication designer and his website is built with WordPress, however, unlike many other pages, his page doesn't look bad at all. Maybe because he simply went beyond typing text align and then hoped for the best. In his talk, he will shed some light from a designer's perspective, why justify text in a web browser is way behind the quality of justified text in professional DTP software. Even if you're neither a designer nor a typography nerd, stay here because Johannes will have some valuable tips and tricks for you how to fix the issue with text justification. Johannes, thanks for joining, welcome, and the stage is yours. Thank you very much for the opportunity to talk at this unique event. My name is Johannes Ammon. I'm a graphic designer and typography nerd from Germany. I'm living in the city of Mainz, where Johannes Gutenberg started a worldwide media revolution about 500 years ago. And in this talk, I'm going to explain how we can learn from him when dealing with justified text on the web. So let's start. So probably every one of you made this experience once in a while. You have a couple of text columns and you want to align it on both sides, so it looks nice and clean. And what do you do? You just type in text align justify and boom, it looks like shit. You are presented with this kind of mess. There are huge white spaces inside of the columns and it looks not very professional. And it's not even just an aesthetic issue. Readability is also affected in a very bad way. So this is not good. The justification on the web is so bad that professional designers will always advise you to not use it at all. So this is the current state in 2020 to not use it at all. And even though there would be many benefits of justified text, I can imagine just for example modular layouts or better use of the given space in smartphone sizes, flexible designs and it just looks nice to have a straight right margin. So I think it's a little bit sad that we cannot make use of all the achievements of digital type setting in the web. So there are several reasons for the bad justification quality on the web. First of all, there is no way of doing manual adjustments like custom line breaks or something like that. For example in print design you can do this in the end after the type setting on the web in a highly responsive environment. This just makes no sense. You could hard code something into the text block but it probably makes no sense. So this is an important tool you don't have in type setting on the web. And we have to find other solutions. Second reason is hyphenation. There was no proper hyphenation for a very long time on the web. It's just a few years since the browser support of hyphens auto was not really good and still automatic hyphenation works just with a few privileged languages. So this was a really big issue for a long time. Third reason is browsers don't make use of advanced line breaking algorithms that are pretty common in professional desktop publishing software like Adobe InDesign for decades now. So again print is way ahead in typographic quality. So I did a lot of research on the history of justification both in print and digital design. There were several points in digital history where we had great concepts and working solutions for beautiful justification but none of them eventually made it to the web. So I asked myself why is that? How could we improve justification on the web? I want to present four different approaches. First I will talk about the current state of hyphenation. Then I will explain the crucial topic of line breaking and why advanced algorithms are not implemented yet. Then I will pitch some ideas for something I call soft justification and last but not least the fun stuff how to improve justification via variable fonts and open type ligatures. So let's go back to our paragraph. The first thing you will do to improve the appearance of these text blocks is to add a line with hyphen's auto. And you see it will improve your text significantly but there are still a lot of white holes and if you look closely the hyphenations are pretty uncommon. Since hyphenation is highly dependent on language rules built into the browser you need to set the language for the document first or in this case for the element. So you need to go into your markup and you need to add the language tag and you see the hyphenation is changing again. So after adding proper hyphenation we have a way better type set even though there is a lot of irregular white space inside the columns so not satisfying. Well hyphen's auto was a huge step forward. Nevertheless I would like to have way more control over some details such as the number of consecutive lines with hyphen's or the ability to prevent the hyphenation of the last line in the paragraph. So luckily there is some news on the horizon. The working draft of CSS text module level 4 is mentioning 4 additional properties. The most exciting from my point of view is hyphenate limit zone. It gives you the ability of defining a maximum amount of unfilled space that may be left before hyphenation even is triggered. So this will reduce the number of hyphenations significantly in those cases where it's not really a benefit. So this is great stuff. I'm looking forward to this. Hyphenation is done at least for now. We made some good progress in the last years. Let's look into the other topics which are maybe more relevant for now. To understand the benefits of advanced justification algorithms we first have to understand the basics of line breaking. Here we have a text column and the algorithm starts by setting every single character next to each other step by step until the end of the line is reached and the word is not fitting anymore. Then it goes back until it reaches the nearest breakpoint in this case a space character, deletes everything after this breakpoint and performs the line break itself. In the next line it continues to type setting as above character by character, line break and so on. Finally we have a left aligned text column and the space at the end of the lines is equally divided and filled in between the words. Now we have a justified text column and that's it. This more or less represents your current line breaking algorithm in your browser in 2020. So not really advanced. To get a little bit more advanced let's see what Donald Knuth and Michael Plas write in their famous paper breaking paragraphs into lines. So at the beginning of their paper they are pointing out that for computers it's no problem anymore to divide the space equally between the words. But the more central problem is to find the right breakpoints to break paragraph into lines and that's exactly what the algorithm is doing. Finding the optimal breakpoints of a given paragraph. So what the algorithm is doing is to look at the whole paragraph and calculating all the different possibilities how to break the lines and finding the best solution. So it considers if I break this word in the first line what consequences does it have for the next lines and do I have even bigger problems in the last line. So in the end of this process there is one final best solution for this paragraph to break the lines. And this is how it found its way into software like Adobe InDesign. If you go to the justification settings and activate a paragraph composer in comparison to a single line composer the software will consider the whole paragraph and deliver a better solution for your justification. By 2020 none of the major browsers has implemented yet an advanced line breaking algorithm like the Knuth and Plus algorithm. So why is that? First of all they say it's performance. This algorithm can be much more expensive than the simple greedy algorithm. It's quadratic in paragraph length so the problems occur with really long files and long paragraphs. I asked Bram Stein about this who by the way did a great talk on this topic at Robothon conference in 2018 and he says the performance is not a really strong argument. The processing power got way better in the last 10 years and there are some pretty fast linear time implementations of the algorithm as well. He thinks it's more like unwillingness to change something so fundamental to a browser layout engine and it's really difficult for browser makers to make that change happen. So luckily there is also hope on the horizon. When I was reading the CSS text module level 4 I found some property with the beautiful name text wrap pretty and it specifies the user agent should bias for better layout over speed and is expected to consider multiple lines when making break decisions. This sounds really exciting. Advanced line breaking algorithms are not really here yet but maybe there's a chance of having them in the future built into a browser. I would like to see it happen. The next topic is something I call soft justification. If you ask designers about the best justified text in history they all refer to Johannes Gutenberg. But if you look closer into his bible you will see that the right margin is everything but straight. Instead it's more like an optical margin and sometimes letters are hanging out. One of the findings of my research was that Gutenberg actually advised his workers to put more attention to the spaces in the lines than having a straight right margin. So the general appearance of the typeset of Johannes Gutenberg that it looks so elegant is more like an issue of spaces inside of the lines than having a really straight straight right margin. Our algorithms today have a very binary way of handling this. If the word is just one pixel longer than the line the word will break and there is no tolerance zone as in Gutenberg's bible at this time. So in my opinion the spaces between the words are way more important than a straight right edge. I would propose the implementation of a tolerance zone in the line breaking algorithm kind of similar to the hyphenation zone I showed earlier so this is kind of exciting. I would like to have more control over priorities in line breaking so that web designers could define if they prioritize a straight right margin or if they want fewer hyphenations. And in general I'm a fan of less binary more human approaches of algorithms so it doesn't always have to be one or zero. Love justification is a term a friend of mine made up so it's not really existing but maybe some of my ideas will find eventually their way into some web standards for better typography. Who knows. The last topic I want to talk about is the fun part. How to improve justification on the web via variable fonts and open type ligatures. If we go back to Johannes Gutenberg and look closer to his bible we will see that he cheated a little bit. He didn't use only 26 different letters but in fact had a total of 290 glyphs, a lot of combinations and variations like ligatures or the same letters without the serifs which allowed him to squeeze some words into a line or to make them more wide inside of the line so he had the perfect tool for reaching the line length in the end. And this inspired some pioneers of digital typesetting in the early 90s to develop some solutions that could shrink and extend typefaces so it would fit better into the lines and make for better typeset in general. The technology of glyph scaling was pretty advanced at this point. So the software of Hermann Zapf actually adjusted the stem width of the letters so the gray value or type color was staying the same. But unfortunately this part of glyph scaling just somehow got lost. Eventually Adobe bought the patents and implemented the technology into Adobe InDesign. I don't really know what happened to the code but if you turn on glyph scaling in Adobe InDesign right now, your letters just get distorted which is why nobody should ever be using it. But you guessed it, there is a solution on the horizon and it's called variable fonts or open type variations. This is an exciting new technology which combines several different styles of a typeface into one single file. Type designers can design the different masters and the browser can interpolate between those stages without any distortion so this is really nice. I think it's available since 2016 and people are using it. I think most modern browsers are supporting it by now so this is a huge step forward. I'm not the first one with the idea of improving justified text on the web via variable fonts. In fact Bramstein got excellent results by combining his Knuth and Plus implementation with variable fonts. If you are interested in this very technical approach I will link his talk in my resources. I am a type designer and so I wondered how could I use this technology in the best possible way. I created a variable font specialized for this use case and first of all I systematically analyzed all the letters for their ability to shrink and extend and obviously there are huge differences. And I ended up with this little trick. The width axis of the variable font is kind of asynchronous. The letters grow and shrink only within their own capabilities so you see an eye is not very flexible but if we look at the narrow version of the W you can see in the middle it has a little bit more air to prevent it from being too dark. At some point I am even changing the A to a completely different shape so we have even more flexibility in width. Referring to Johannes Gutenberg I also created some experimental ligatures. Your mileage may vary if this is a good idea but I think at this point it's not about readability it's just about aesthetics. Finally I put all these components together and created a little live demo for better justification on the web. In this tool you can paste any text, choose the column width and font size and experiment with my new added parameters. It will simulate the justification process since unfortunately we don't have the ability to hook into the real line breaking algorithm of the browser. Let me just show you the results. This is a type set without any additional parameters and now I add hyphenation, variable fonts and my experimental open type ligatures and we'll see the improvement. Nice, isn't it? Digital typography will set the future trends of aesthetics in type setting. With all the programs available today there is no excuse anymore for mediocre typography. The funny part is Hermann Zapf wrote this in a paper from 1993. So the technical possibilities are there for a very long time, we just have to use them for better typography on the web. Thank you very much for listening. It was a great honor for me to present at this stage. If you are interested in further information on this topic and all my resources I put everything together for you on my website so check it out. Thank you. Johannes wow thank you very much I've been really standing here listening carefully and it is indeed hard to believe that it looks like technology is still so far behind. Anyway, I have a question for you. So the question is, is there a better open source font editor than font forge? Yeah, thank you first of all, thank you for having me and thank you for the great introduction you brought for me. I'm very glad I can present my talk here at this stage. Thank you for the question, I saw it in the chat and I was thinking about it. I'm not aware of any good open source alternative, but I have to say the commercial font editing software like glyphs app and robofont, they both have excellent communities which are discussing in the board and providing some plugins and since it's such a small community it's always good to support those software creators and I can recommend both of them and there's also one adobe illustrator plugin for people who just want to get into type design and are used to using illustrator and just want to convert it to a font and this one is called font self so I unfortunately I have no good open source alternatives but I can recommend robofont glyphs app and the illustrator plugin font self for beginners and starters, it's easy to use. Great stuff, so now I'm also curious how long did it take you to put your little, let's say gooey or wizard together, the one you just showed at the end of your talk where you just need to click click click and it does all the hyphenation stuff etc and please don't tell me you did it in five minutes. No I didn't because I'm not really a good coder since I'm a designer and just got into code at this time and yeah it's also made with really bad technologies so it's written in jakefairy at this time and I tried to clean it up a little bit for this presentation but yeah you will see it it's not really good technology but I think there are great solutions out there check out the resources of bremstein he did great stuff and this one is just from a designer's perspective yeah the I wanted to try to show what's possible from a type design perspective and yeah it took me quite a while so I can imagine but thanks for investing the time I think it'll it'll help many many people who at least sit down and try to design a nice good looking website and overcome those challenges. A second question just came in what about latex's algorithm trying to use similar space width on subsequent lines? Yeah the the algorithms of the tech line breaking system or the tech typeset system they are really avant-garde in this field so I told you about Hermann Zapp and all the stuff happening in the 90s and all these stuff was mainly made for the tech system and I'm not really an expert in these algorithms or this tech system but I know they did a lot of great stuff in the 90s that somehow got lost and yeah they tried to limit the number of hyphenations in subsequent lines and they tried to bring it even one step further in preventing that one line is expanded and the next line is shrinked so it will be really obvious so they tried to put this into the algorithm as well and it makes an even better justified text and I also have to say my live demo is without a Knuth and Plus algorithm so I was not able to combine it and my demo is only with variable fonts and if you would combine this with a Knuth and Plus algorithm and some of these stuff like subsequent lines and you can get even better results well it definitely sounds like this whole topic so a better justification for the web is kind of a fantastic link between the coders the nerds who really love the code who love algorithms and more the opposite people who are interested in design or even the marketing people etc etc so do you have any let's say additional tips tricks to share beyond the great stuff you've already shown I have no more additional questions for you for the moment from the audience yeah thank you so far I really enjoy being at this intersection between design and code because I also think there's a huge potential and just making better typography with all the technical abilities we have today further tips I think I put a list of great stuff people out there right at this intersection type and code created and I made a list of resources on my website I linked it on the last slide of my slideshow it's I think I'm not sure if you can see it right now but it's on my website final type slash justification and you can check out all the other projects from the coders and typographers out there I think it's a really interesting topic right now I do totally agree and I mean I don't know anybody who wouldn't love to really look at pretty websites there are many out there but there are many ugly and compared to the overall amount only a few really really pretty websites out there anyway famous last words from my side are simple thank you so much Johannes for joining us for delivering this fantastic talk great topic technology works stable stream stable internet connection what else do we want and need thank you so much and if we would if we will get further questions or let's say maybe some some tweets through our communication channels we will for sure share them with you and put them put you in touch with with the audience thank you so much have a great day and enjoy the rest of the conference