 Here we are for typographic readability in theme design and development You are seated so we can go on Thanks to Work on pure of having me here. I'm really excited to to try to give this a bit of knowledge on typography that is in the middle between the competencies of Designers and developers, so I try to let you Communicate better. Maybe I don't know I try if you feel like tweeting or you know already the hashtags and Okay, I'll start with an abstract the abstract of this talk Actually, I'm assuming that you already read this piece of text Since you are here. Otherwise, I think unless unless you haven't Took the wrong room here. We are so This is not a proper way to style a piece of text in order to be ready to be read Maybe in a light mode with a different font a bit more readable That's mullish the one that is used by the WorkCamp Europe communication Is a bit better? You see the difference. This is too crowded to narrow and In this sort of dark mode and this is a lighter mode. It's not so much light It's not poor white at the background The text is a bit spaced Vertically But maybe I still not let you read the content. Okay, because you're not keen to read it if I do something like taking the text and I split it in different paragraphs and I'll start to differentiate a bit and maybe trying to introduce some hierarchy Have some more chances that you are going to read this and of course here I have your attention for the moment at least and Yeah, you are motivated to read whereas on on the web our users are not they are in a hurry they They have things to do other things. So they are not so patient with us and without our with our Way of starting text. So let's see Here is a presentation of me in dark mode unlegible a dark mode. This is a bit better in a light mode the important thing to say is nice to meet you and the other is that I'm quite I'm a sort of web designer and developers That's why I'm in that intersection and I'm that because I've started to work with the web From the very beginning on the web. It's so I saw different attitudes toward the web and in the recent years I've been Really focused on typography and web fonts since the web fonts were possible to be installed into the websites There was a time in which that was not possible at all The period that I call the font agnosticism. So the designers couldn't say couldn't tell in which font that There's a website where Written were read by the users because They could only suggest Type of font to be used Okay, another unlegible light mode is not like that dark mode take a ways Okay, I I'd like to start with accessibility because I think that accessibility requirements are a good starting point for readability and We see the difference between two concepts that are in well described in the English language that are legibility and readability We'll start we try to recognize the main factors that affect the reading The reading process on digital devices in particular and what we can do from that to to improve that and We'll start recognize some characteristics of the web fonts with regards to readability And maybe some Things also about the variable fonts and the how they can help fine-tuning the text Just one word before that I would like to ask you how many of you and know something about variable fonts How many have been using them in production? Okay, have an idea. Okay, because they It's very different in the audiences on this topic Okay, let's see factors that influence reading. I actually tried to to have three sets three groups of factors and for convenience and I I Would say that there are some common factors common to everybody some personal conditions different from everybody is different and Some typographic properties There are factors that we could we can take advantage of Among the common factors To name a few I would say the distance of reading the lighting the Reading support where what we are reading on paper on a Screen which kind of screen and gone and so on the reading environment in which we are The mental concentration we have in that moment the mood we have in that moment and The text function it depends what we are reading is that a title is that a menu or what is it? So we see this is common factors that influence reading more less and there are Many more actually Among the personal conditions, I would say this age age is really important with that regard because with age with decrease our Our sight Quite a lot and quite progressively. So that's important. That's a personal condition that Will sooner or later Unfortunately Everybody will experience maybe Then that's the proficiency in reading. I mean and that's depend on how much we have been reading things on And also the language in which we are reading the proficiency in a certain language will condition our reading, of course The topic we are reading and the motivation we have when we read and some other personal conditions are of course link to the visual impairments that we might have or other Cognitive divergences of various types like dyslexia and some others that can condition in very different ways the way of reading and What about typography, okay, we have Some properties that we can take advantage of like the kind of typeface you're using When I say typeface I mean fonts that's for developers. Okay designs. They know that maybe The font style is it bold is it light The font size very very very very very important Line length very very very very very very very important line spacing important color contrast very very important Character spacing important Character with Important if we are dealing with variable fonts for example, that's I think we can find tune and The rhythm the rhythm It's difficult to want to to see but if you have Quite an experience with typography after a while you'll recognize the rhythm Among the letters and so that's a thing that can Influence reading quite a lot Okay We'll have two playgrounds that we'll try to to use I prepared this code pen and you can Go to that place to that code pen like with the URL It's a bit dot Ly flash CSS minus readability I see I Have a point, but that's no point there. Okay at the end of the URL So in typography points are very ending sentencing with points. It's important But not with your ass Sorry for that or if you have or if you like to use also An iPhone or sorry a smartphone you'll you can use the QR code but I'll recommend you to use it in the horizontal mode because We we don't have enough Room for for the exercise. So that's not really optimized for vertical On mobile too many things there And if you are with Figma, you can go but you can actually open any time any I with Figma and Or you can use this one for as a starting point. I just put some paragraphs with different fonts and a few characteristics, then maybe you will see better and If you just want to take note of this I'll go for the CSS playground for for a minute then we will play that later just to let you See I have to sorry about that. Yes Okay, I stay here This area is made like this. I have a made a control area at the on the left and We can see or hide The CSS that is produced and see or hide the controls That's our playgrounds very simple The here we have three Text one is in English one is in Italian because I'm Italian So I wanted to I'm I feel comfortable with that typography. That's why I'm I've introduced that and this I put some Greek because we are here. So we have three different mood also on the text to test and here we have a lot of CSS Properties I mean I have made some controls that control some properties such as see the font size for example, it's quite We can Change the font size and One thing that I tried to do I tried it was to set the two at the minimum and the maximum with something reasonable and For example, I said, okay font size Won't be smaller than 0.6 of the root font size and Actually, I would the maximum I would before I put this 2.5 but in this room it was really too small. So I had to Add the extra Measures like I said, okay for maybe In the rear part of the room they can see something there If it's enough, I don't know because reading is very much conditioned by distance So it's not the same to have to use this playground at this distance distance 70 centimeters, I don't know or a lot of meters Other things are of course the kind of Typeface we are using and we'll talk about this later on then the font weight font weight Well, we generally use it at 300 400 and 700 we have regular and bold with static fonts with variable fonts We have if a variable font has the weight axis We can move it To a continuum of Values We depends on the font each font might have a different range. So check it before using it I Generalize here because I put different typefaces such as here are five Five Variable fonts that are in the Google phones connection connection collection. So you can use them Here we have the classic Five categories of the font stack So This is what we what the browser is Using if you say just a category a general category so Serif is when you Say in CSS font and let's see what the CSS does font family serif only thing only serif The browser will pick up this them the serif that is On the machine The user machine. So we are in we don't have a lot of control about that. Whereas If you do with some serif it will pick up another one that the default for that browser and that operating system A mono space the same cursive Don't look at that fantasy. Don't look at that either. It's papyrus. So Sorry, but I didn't choose it. Okay. I'm font agnostic. I'm didn't choose it was the browser. It's not my fault Okay, if I Would like to do something better. I can use the UI system font. That's different from the system font and This is great because the UI system font is the font that is on the machine of the user, but is very It's a variable font square way for forum. I've got an mx. So it's a San Francisco. I've got a Windows you'll have a secret UI in their font very well very well done and you see they are they are Variable as they have they have San Francisco has an axis that is the weight axis so I can use it and And I It's quite an interesting thing to to to use the UI system font Oh, otherwise, I go with other funds that I can choose and I choose of course anytime I choose a font. I Don't choose a font. I I have to choose a font stock. So I take a font but my CSF should Should write. Okay, please Browser take this phone that I uploaded but if you can't upload it use a sensory font It's okay for me. That's what is saying the browser. So as designers Please take this in mind and maybe Choose not only one font, but also the fallback font the fallback font category or Try to reason in a wider Environment of phones or environment in wider scenarios. I mean if the phone doesn't load what happens? Okay, and it's not it's quite It can happen quite often Okay, I'll go back to some Concerts, okay some definitions I will start with visibility and And Visibility Is the prerequisite for legibility and readability if you don't see You can't read. I mean you can't read written text. Of course. There are different Way to read it for example. We have screen readers that they bring Texts to voice and so on we are dealing here with Written font written text and you have to see it in order to read it the first prerequisite Then you have legibility that I would trans it would Describe as decoding that's different from readability That's more like ease of reading For example in Italian. We don't have this is in distinction. We call it legibility It's it comes on late in maybe the same origin of legibility and It's a broad context where a con concept. Whereas legibility is We see later on something you have to decode in the Sorry in you have to decode and Readability is if you want to read that it's pleasant to read or not and In readability. We have also two different concepts Sorry because Couldn't read it content readability and typographic readability we will talk about this because content readability means The the kind of test can I read it because I have studied that subject or not? So, okay, that's different It's very important for SEO things things like that But start from legibility and starting from that I would say I would quote the Web content accessibility guidelines. Everybody knows about them. Maybe I think so. Have you is anybody who haven't heard of them? They Are a product of the W3C and they are In my opinion to be seen in a wider context that is That guidelines are meant for for us That we for people who does web content whereas there are others Guidelines for user agents producer and authoring tool producers Because readability is a complex thing things think it must be seen in From different point of view. It's not only web content. We can do our best, but it's not enough for example when the browser brought the possibility to And To make the font bigger or at least to zoom the page that was great And it goes on the part of the user agent and not the well-contained People Okay, I will have a look to the book card on With regard to text and readability so a smaller part of the subject Maybe you know that there are three comfort conformity levels in the book and More a's mean means means more requirements We have they have a four group in which they divide their 13 guidelines So we have perceivable Operable understandable and robust. This is not a workshop on that But I will try to pick up some concepts from that These are the 13 guidelines and we'll We see something about distinguishable and readable That's so also something interesting in adapter and navigable, but we won't talk about that and We will have I will have a look to those And Success criteria This is all that's what I would like to analyze Perceivable distinguishable We had the first two criteria that I am Success criteria I would say is are important for the ability at this thing Or maybe they used to be important. They say don't use Image of text in on the web. It used to be in the past quite a lot They said don't use it because otherwise the screen reader won't read the content Maybe we are now in a different period in a different era now. It's possible to read the content. So I don't know if it's Interesting or not anyway this Good recommendation not to use I have the text here, but one go through that We'll summarize don't use images of text unless you can't do otherwise Because otherwise it's difficult to for example with the retina display. We have an image that can't be Skade So it becomes a readable Pixelated and so it's better not to use it for for text Okay, no not Very good. I mean you already do that most of the time then we have this big big question about the contrast The contrast has two levels of conformity that basically change the values of that Again, I won't let you read it because it's very long, but I will summarize it a bit with this Table where we have two level of conformities and they make this thing distinction between regular text and large text and they say we have we must have a minimum contrast ratio the contradiction of the color of the text With respect to the color of the background Okay, and so they have different levels and they introduce this concept large text and I'm curious about that Routed text. What do you mean? What do they what do they mean by text? No large text. What is it? That's how they define large text. Okay 18 point or if the text is bold is 14 point for Latin text and not to talk about the languages that has I do grams like Chinese Japanese and Korean Okay, let's go to the first consideration point points were meant to be for Paper for print. Yeah, it's not the question Then shouldn't be used in on on screens on screen. We have pixels, you know that the graphic department reasons in pixels not in point. I mean the old graphic department that was Making material for print use that one, but Web designers shouldn't use points, but they should use pixels But do we really know what a pixel is? Are you sure? We used to know we used to know what they was Sometimes ago we had some screens and The pixel was a hardware pick a hardware pixel the smallest point a screen could show But it's no more the case because we have everywhere virtual pixels that are based on a reference pixels so all the old screens new screens and What is the origin of the virtual pixel? Remember the iPhone 3 Okay, maybe and There was a point then when on the market arrived the iPhone 4 Apparently they were very similar they where they had the same dimensions same screen dimensions but Different resolution So what happens here was that each side of the screen doubled the number of pixels. Okay great for images, but Consider a reading a website That had the font in pixels Okay, so the pixel and that was there were a lot at those time Texting pixels 32 pixel for example would have been seen on the other screen Half the size so they had to introduce not no more the physical pixel, but the virtual pixel and This CSS specification had to to be Changed and so upgraded let's say so and this is a nice definition of a pixel the CSS pixels That is an angle. It's a visual angle with zero dot zero degrees level And just to Have you an idea of what they mean? It's not easy. I'll try I Used Dali to to to to figure out a mini much maybe my I don't know if it helps RF they introduce this concept that it's the reference pixel that is a visual angle of one pixel on a device with a device peaks and density of 96 DPI as an old imagine an old screen 96 DPI as resolution at one arm of distance Okay, and that conditions that's the pixel. Okay, it's an angle to see that pick that point, so it's just a convention but and This concept of angle is a bit difficult to grasp, but it's very very important and is Imagine you have two a's at the same if you want to have it in the same perception of Dimensions if something is Near and something is far from from your eye You have to let the the farer be larger taller So you have this perception of the same dimensions and that's this famous picture by Oliver Time that's from 2012 that says so It This is a sort of introduction of the responsive web typography Well, maybe at least me at the beginning I thought it was we used to make a font smaller on on it on a smartphone because we thought that I thought it was The smaller screen that brought that but it's not a question of the screen But it's a question of distance of reading. So if you have something near You have a different angle of So you need to You to have a smaller font Responsive web type of it such as that's what we have been at the beginning. It was this so for example on mobile and An iPad tablet, I don't know It's smaller than on a desktop because of the distance Now we have fluid epigraphy. Okay, we have but that's a starting point. Let's go back to the Accessibility guidelines and okay pointer pixel now we have some Elements to convert one to the other that's math. I will it's too late to go in the day to Go but we can Have something a conversion so On print to we have what we have 12 points are roughly 16 pixels on the peak on A screen We can convert so the values of the web content accessibility guidance and large text in point might correspond to something like 24 pixels or 19 pixels if the the text is bold so we are able to calculate a contrast ratio that is required Okay, maybe you have tools for that. Okay, but I wanted to let you know that the theory behind Okay, now we have you know what to do but but in the specification they said okay points and Also m's or percentages other measures We converted to pixels otherwise we couldn't talk with our graphic department. Okay, because It's really difficult to understand that how Poor poor developers that they have to translate pixels into what they don't know what What is so let's help developers in this case? and The users as well because we are not going to use pixels in production for text. That's not a good idea Let's see brief very briefly the Different unit units of measurement we have in CSS We have some That comes from print, you know meet centimeters meter millimeters inches point and because are typically a typographic Units and then we have pixels that are for screen. Okay, that's what we have then we have percentage you can use percentage and It can be for print or for screen It's neutral and then we have interesting typographic Units that are m ram x and ch Just into The the more Everybody is knowing maybe M and RAM RAM is the root element and M is Relative to the font size of the Parent and It takes his name by the M the of the font We will see in practice later on Ram is the root element, then we have x and ch that depend on the font the font x is meant to be the height of a x of the lowercase x of that font and ch is The width of the zero character in that font the changes with the font. So the last two Are dependent of the particular font they change with the font in the playground we can try and We we can experience that difference Then we have some other new some new new more new than others and They are relative units That are basically linked to the viewport The first and the last one for the CSS lovers in the room Where they they are? Marvelous because they depend on the content of the single content that has We can measure the content of a single element of the CSS So that's very revolutionary So why I said I said that we are not going to use pixels Because there's another Web content user video guidance that says that we need to let people resize text and It must be resized Up to 200 percent. Okay. How can we do that? Common plus or control plus More times and we have the zoom with zoom or the page But that's not enough. We have two different Way to zoom The text the screen zoom sorry, that's Italian because my browser is Italian and my I couldn't translate it But we have two ways of Making this zoom of that one is a screen zoom and you reach it by Visualize and I don't know how it's in which Anyway, it's common plus or control plus. Okay The other one is a preference in the browser. This is chrome and any browser has different Way, but basically they all the they do is Let the the user select a different size of the text for for every Website they visit so that's and I think because if I need a Wide and taller larger font I do it and As a user but the designer shouldn't override this Choice by the user and it's quite common very very common a Lot of designers go and that sorry developers in this case they go and put The size of the font size the font size of the root element the HTML and in pixels and this is What makes them The text Not resizable by the user preferences. So remember that don't use it as a root level Maybe we can see examples later on but I leave you with this Recommendation this is Codebell, I'll leave it in a slide in the slides you can try it and that's What they what it does You can test it Let's go back also to the the other recommendations One other recommendation is the concept of reflow So it's quite complex also this one But basically is it introduces the responsive web design that the necessities necessity Then we have other two interesting Guidelines one is for Level three of conformity with quite a lot, but I like it because it does a lot of recommendations for example it says Let the user select the font the foreground and background colors That's important for a lot of people. So don't over Overwrite it's like the thing I said before that the pictures as In your CSS you have to to let To consider the preferences of the users that's Basically the point the important point then you have one nine interesting interesting consideration and that is this The width no more than 80 characters In the Latin alphabet or 40 with ideograms No, don't justify text That's we see later on the line spacing. It's important then space between the lines and The possibility to resize it actually be so before Okay, interesting things to say then we have text spacing Level a this helps readability as well. So the line height the spacing between One paragraph and another or the letter spacing the space between the They let them The characters or the world spacing Then then the space between the world these are all CSS properties that we can use or are some Sliders we have in our graphic Up But be careful for example if you space and if you use ligatures a characteristic of a font the F and I the I one character because the topographer made a particular leaf in order to Have it nice, but if you have both combined something won't Won't work. See so everybody is incur everything is interconnected And then one other thing very important that the recommendations Have Is the language of a page always put the information of the language of the page because this It's easy to do it in HTML No HTMLer here The language at the beginning of in the root element. Okay, and this Has the consequences for saying for example with the hyphenation It hyphenation is different from one language to another so the browser will Will behave differently according With respect to the language that is declared so here HTML and Hyphenation CSS by CSS and browser and a lot of things can go together You see yes, this was an example. You see Maybe does a Link as well And another important thing was the reading level And they recommend to use a lang a simple language that has To be understood by by people with lower second secondary education level Okay, that's a concept of readability in one of the two meaning we saw before so the content readability But let's go to the difference between legibility and readability Legibility Answer to the question. Can you read it? This is my definition by a Stefan calls and It has to do with The anatomy of the characters or with that particular font we have terminology that typographers use and I'll recommend you to start Understand this terminology because it helps you to Analyze the font you're going to use There are a lot of things important here and for example understanding that the font size is And Different from what you really see and this difference has historical reasons because of the the dimension of the font was linked to the the metal type and So when we use CSS and we don't know this historical reason we cannot understand why we cannot align things well, so This is this is still a big problem in the typography or with your suss but legibility has to do with The with the types with the different type faces and Have a look here. We have ambiguous forms. Can we tell if it's a zero or no or an uppercase oh In some fonts is easier in some other is not or can we tell if it's a nine or a G or if it's a one and L and And I and a uppercase I so if you are mean and you want to do to Make I don't know a form when your user has to put Password use a very ambiguous font, so they will hate you Another Think is also for example there you see that are an N that might be Taken for an M. This is a joke for typographers camming. It's for caring. It's for typographers. It's gone another thing is The rhythm and letter spacing take this letter for example Minimum is quite good example of you see the rhythm how it changes Some are more regular than others and There are also some other potential ambiguous shapes for example a sensory font Often has B D P and Q There are the same shape Reflected or upside down and That's said to be a very big problem for dyslexic people Some other some typographers says that it's not the case. That's the problem for everybody If you if you feel like that you can use a serif on and so you long you won't have that problem because each Gleaf is different in this case Here you can have some because some people say that dyslexia people tend to Flip the some letters. That's why this is going to be a problem for them But some other are not don't agree with that. I don't know and I have an answer What about readability again our readability the content readability with so before will answer the way to the question Can you understand this text which level of scolarization you have? Whereas the typographic readability answers to the question would you like to read this text? Can we do something in order to let you? Read it and it has to do with the user experience. I call it the reader the reading the reader experience We have custom experience so we might have also the reader experience, okay, and that's the typographic readability But how do we read? That's the point. We have some technical aspects We have a physical side of reading we use the eye two eyes generally and We have a use our brain. They are connected And what we do with this not so scientific it just to give you an idea of The process is involved We have high movements Fixations so we fix we have focus on only few letters few characters and then we jump With a socket to another few letters and we don't read some letters in between More or less the same we do it will do we will do win with the vertical rhythm This is quite a nice representation of these movements because it's not a jump the socket. It's a very fast movement and The fixation might be longer shorter wider or shorter, so this is represented with the different Radius of these Circles by Sophie Bayer. That's an expert of readability and we have this process of the acuity of for their vision, so It's another representation We have only few letters that are at focus in a time and that's why That's how it comes it comes from the back of the retina. We have these two parts the makura and the fovea the fovea is very rich of terminations, so that's the one that has the letters may Have in focus those characters and the makura is can see but not so well and as we see the image is upside down what we can think is that In each fixation we Have a few letters at focus and the other are not we can read it but not so well And so what we read when we read we do this jumps and We there's a lot of math here the visual angle so the distance the size of the Front the the spacing all these things we have some math and we have some In a line of 65 characters will have more or less seven fixations per line and six movements saccading movements and after that after our eye as Seen the things we have the mental processes so We have Stimulus a world for example, we've detected some Letters we can combine and maybe it's what happens in our brain and We combine things is not only what we see but we also we see the world We know the world we try we guess something the easiest way in order to understand that's our brain more or less works And this explains one reason this last thing of the world Decoding explains why typographer says that it's easier to read small Letters Instead of capital letters a word because you can recognize the shape of the world is Sort of ideogram you recognize you've seen it before you don't read it you recognize it so your the more you read the more the faster you read it and It also It's also linked to the typeface she's a typeface designer and Very famous quotation we read best what we read most so it depends Which font in which one do you read best? I don't know maybe You have a font, you know well, and you read fast work because of that And another concept important is what do we read? Text is not or the same we have long form reading we have the one of novice or technical text we have Interlute reading for example when we have something on the social media we read it but not It's not it's different you have experience of course and some glanceable reading is when for example you You look at sign three directions or on the web for example you have a digital menu so You you are going to read when you need it And so on the web for example we have the body text the display text a functional text for example and They have different functions so we style it differently so Maybe you know one font is good for one reason and not for you for another one way of studying is From what is it? And on the typeset queen so we have to match this Different Type of text to the type of readings And we have to adapt our type setting Thinking about that. Let's see now a Bit more on the Example that we may be for you might recognize the Factors, let's see for example that I fination and The justification this is the classical Okay, we want to justify a text let's put it a bit bigger font size a bit bigger Let's Justify here Justify we generally let's do it a bit shorter as the line has a white. We don't see the problem This is quite good actually Line Where is the line height one side line length you see here We have what I probably call it call rivers this rivers this and they are not nice So you generally don't use Justification especially on small columns and in if you do it you have to hyphenate maybe hyphenate so you see it's better because you You cut some words and so you have less rivers Of course if you hyphenate in your html you have to have the correct language. So everything is Linked otherwise you'll end up with a very poor hyphenation. That's very inconvenient because it looks like Big typo Other things that I would like to show you is the Unit on measurement Let's see. Let's put it a lineman left. No hyphenate so Let's put a font size that's a bit bigger and Line length a bit longer. I said 47 47 of what of CH CH Characters is the unit That counts the number of characters. So for example If I change the font This is a serif. Let me put this on serif. You see it has a different length Because it counts the number of characters CH So for example if you want to be sure that you have a Certain number of current character or a maximum number of characters per line. You can use CH or you can either use Ems, but Ems is The same concept let's say is linked to the typeface But it's double more or less the double of the CH for example if we have Let's start from CH we'd like to have 45 length 45 Okay with the M it should be half that Dimensions in order to have the same More or less the same length CH and M Different value you can try and maybe familiarize with this Or if you use REM At the root M the root so this is fixed and it's a good thing to if you are going to have a hierarchy hierarchy in your For example H1 H2 H3's It's a good idea to have REM. So you have something that is always at the same reference They won't change Whereas if you use Ems They depends on the container. It's more like using percentages another thing very important is the Line height Line height here where line height I Put a minimum of one and a maximum of Two It's basically what in an app in Figma maybe rather up you will find it maybe in percentages To have this or otherwise you have some in in a lot and of In a lot of apps you find it or link to a value or to a percentage It's the same concept here. We talk about a CSS But we might have it in app differently, but one is fixed for example If you put it, let's do it like Example now we cannot do it here because I didn't allow to use the pixels as Phone size because the phone size But I Let you show you Phone size is here. I do one thing. It's all I Sorry, just a second. So I see better here Phone size if we I put the line height in the code pen Being just a number without the unit that means as it's a relative it's not fixed if I do it Fixed let's say line height 1.6 Let's say The font size is 1.4 m. Let's say that we do it 20 pixels So this is see if I change Them font size and let's go for Just a second. I tried to do it like this font size 20 pixels is the Line height fixed line height and the font size the same pixels. It's 20 pixels if I change the font size to 30 pixels I Left the Line height fixed so it doesn't skate. That's an adapt whereas if I Keep the font size at Let's say one. It's really small, but I change I change the font size at that point No problem. You see it it adapts so And that's the same with the graphic app as well Okay, so it line height should be something that is Not fixed what we can have the interesting font line Have you got any questions? Some questions, maybe I Can go on on another concept that is let's see font size another thing that the web content Accessibility guidance said Was you can use the letter spacing the world spacing? Be careful if you do it. It's just for very short measures Tiny tiny adjustments Another thing they say is you can add a margin bottom to each paragraph Maybe maybe not depends margin bottom for example between paragraphs you see My help I don't have other uses the indentation of the first Letters Techniques you can use to divide paragraphs and Let them be more readable or See another important thing that I would like to Stress is that font synthesis. Yes or no what is allowed to be and what is not and It's important to be To have awareness about that Phone synthesis is what the browser does to a font for example when we have We want to let's pick a font that is a Monospace I'm not sure if it works, but let's see a monospace and I say I want it in italic But that phone doesn't have italic You see Slanted because of the browser the browser that says okay. I'll make it But that's a typographic crime I watch you Don't do it. I mean be be aware of if the font has Italic and so you can use it otherwise Please don't use it Or take another font or don't use it. Don't let the browser do it There's a CSS property that says okay. Don't do it. He says none Don't do it. This phone does have an italic because it's the phone that Has both Let's say because it's not I don't know which one I could this one has a italic No, baby, not it doesn't have later the paper doesn't have any use and use it The paparra doesn't have italic. So I want to do as the synthesis of the style Or both, okay No The phone that the browser doesn't do the synthesis of that one of the fancy of the car It might be reasonable because a fantasy is very a category very different very Crazy category. So the browser says mom. I won't try to to make a Fake a full they call it in in French the a full bold full italic and And the synthesis the browser can do is both is with regards to italic The way The way to clean the board or not board and the small cups Small cups. Let's take a different also. We have a serif Small cups. I show you another thing that is not nice the small cups is when you have this little another form of a Lower case letters, but with the shape of a uppercase letters with the same height of a lower case letters but the proper small cups should be designed in the in the font and You might be queen of it. Let's see with another one Here is let's do it the phone weight And font size the point is that the stroke of an N is Not the same dimension of the stroke of the O They should have the same stroke in order to be proper small cups. Otherwise is a synthesis None you see don't do it. It doesn't have it if you choose a phone that has a small cups in it If you if you don't let the browser do it it's the phone that does for example, if you go to The collection Google phones. I show you one thing Here we are Google phones if you search for Let's say small SG SG You have for example Emantic SG stands is ematic small cups. I say that this one is the new comic songs But anyway, it has the same mood, but apart from that And This is a proper small cups font so You can use a small cup with this one. You have to to To choose the right font if you want a small cups. It's not easy. Otherwise, it's It's better not to use it for in my opinion, but it depends on figment just to show you I see Because windows resize it You Here for example here. I use and in consolata it's in a variable font and has From I don't know one year maybe in figment. We have the possibility to use properly the variable fonts and you'll find it in For example this sample font. I want to Change the characteristics of the variable and here you see we have two axes of variations wait and With selected yet. Okay. What is it? And if you take another example? Let's see if we have it here or here well This this Adjustments are very difficult to show in a demonstration like that because they are very subtle And so you have to judge you when you have it in the context. We are going to use it That's very important to remember. That's why I said tried with the with the eye with the smartphone with different conditions And you'll find what you can You find the better Setting you think it is But that might be not the better for somebody else So has designer developers we can do a part, but maybe let anyway the the user Adjust for example if they If the user adjusts them the brightness of the screen it changes quite a lot Things here Okay, this concept here one nice one important concept. I think that the most important is to understand that the The relation The relations between three aspects of the paragraph type setting There are the paragraph with the font size and the line height if you change one of them You should adapt the others and Generally, that's not done. We've seen it before the Relation between font size and line height at least with The measures different measures, but the paragraph with is the third element and some people with a lot of knowledge on typography has Said the same thing. This is a metaphor by Richard Rattel Is the readability is like a stool of three legs So you have to have a balance between the three in order to obtain readability I like most a lot to this metaphor and I like also this method with the same is the triangle Equilateral triangle triangle the equilateral triangle of a perfect paragraph by Matti Latin and It it say the same thing in CSS words in says instead of Typographic words because font size is either a phone dimension or line height is called leading in in typography line length is the length measure in typography And I'll tell you this other thing that is linked to the line length and vision and this Comes from a typographer this reason the reason meant comes from a typography. It's called a Bruno mug and it's I found it really Interesting so He says that We have a seven to nine cortex in a fixation of a text at about 30 centimeters Which is with a phone between nine and eleven points so a book when we read a book nine eleven points points on paper and 30 centimeters Seven to nine characters in a fixation. That's what they measured more or less, okay then With a line length of 365 characters we have seven Fixations per line six movements six saccadine movements Okay, with these numbers We end up with a minimum of characters per line of 56 55 let's say to a maximum of 65 so in that condition What we generally read it's a Line of 55 to 66 Characters is the optimum and that's what basically typography has set for 500 years So that measure that measure Comes from the way we see For me it's a tarnishing actually and you see that in a lot of Books, so we have This measure recommended. This is the sacred boot book of typography and they say, okay 66 characters per line is optimal So it comes from what from how we see And I'll tell you to this audience because we make websites and There are no We don't have websites with 65 current as 66 characters We generally don't have it there too long those lines are too long or make either make the the font bigger or shorten your your line and It's plenty of websites that have this problem Wikipedia has worked on on that and it depends on the country So in English they have Started a shorter line so to fix a line Because you know that it's liquid and how it is now nowadays And how it has been for a long time. So that's why it's important to To set a measure another thing that I would like to let you And consider is what what I said before the different Font size when we measure a font size it depends on the font because of historical reasons So what is 16 pixels for I don't know. This is font is called Balboa It's different from the 16 pixels of the times in Roman. They have different And what is the font size? If on size is the container that was the mental the metal Where the metal type was was put so that's basically different. So when you Practically if you have a project you select the font for that project and then you work on the pick them the measure of your The font size well if you change The the font later on you have to rethink about that You can use not absolute measures, but relative it will help But anyway, you have to check and and see if it still works reasonably and That's also a big Question on font loading Because if the phone doesn't load it the browser load the fallback font and they have different measures different Sizes a Property in CSS is coming. It's not really ready, but we'll we'll solve this problem soon. We hope so With regard to what variable fonts and Okay, if a font a variable font is A you Is one font instead of different fonts? I mean one file instead of different files if you had to Upload all those Files of static fonts. We had nine finds for example, and here you have one file with the same Results, but in all the intermediate shapes you can have for example, this is a font with two Dimensions one is the width to axis of variation with and with and wait to access maybe, you know in a Variable font might have a lot of axis of variations. There are five Axes that are considered registered. So they are the most common, but you can put a type designer can put Whatever they want so they can have Axes of a ratio of different types They use full axis for readability at the end you can Technically And see having quite a lot of fonts variable fonts are the weight axis Most of the the fonts on Google font that are variables has have this Axes there might be the weight or the width also or Those two are important, but this one is even better and It's the optical size I Try to describe it because it's it might be Undervalued, but it's really really important if a font has the optical size Axes of variation means that It automatically changes With regard to the font size It's Useful in certain type of fonts the font that I have that have Difference of strokes You see this this one has a very thin stroke and a very Bold stroke the optical size make it different if it is small or big Because if you take this shape and you put it small You won't see this line So it won't be readable so high contracts web fonts such as this one with contrast of strokes Might be used on the web if they have That characteristic the optical size and the browser will take the proper Shape for that particular Measure font size So it means that basically that all the job Has been made by the typographer and not from the designer or developer This is very nice. Okay, and Think of that font pairing now generally a designer takes A Tube kind of type faces one for the headers and one for the body copy, but You can have in one font Something that is Already ready is ready for for being very big of a small So we have a sort of type pairing inside the font and You can have we can do a lot of fine-tuning. You see if you had static fonts You can have a continuum with variable fonts Another interesting axis is the grade axis. It's not official, but I Registered I would register it if I could and it's very interesting for web design because it Slightly increased it makes a character bolder without reflowing the page whereas if you have Bold in general generally you for example, let's say we have a button that is with a thin font weight we want to Have an effect of over or lower and have it bolder The character will will grow in width. That's not what we want If we if we deal with this axis the grade axis We won't have that problem. So that's great. And this is very convenient also for Trying to convert Lights mode in a dark mode because you have Optical Aspects in which you you won't see the difference here actually because of the line the distance whatever You can try it, but if you slightly correct this grade a robot of Lex has a great and the grade axis and let The dark mode be a bit With a less great value and have the same effect Optical corrections, let's say so And there are also web fonts that Try to be legible. That's another big big topic This is nice experiment that is Also a variable fonts and is on Google phones. You can find it there There is search and readability is going very fast and it's And I think that will will see a lot of improvements in Soon a lot of big companies has been Interested in that and they has starting to do Inter Studies from different interdisciplinary Within the interdisciplinary approach and so I think we'll see a lot of results on that This is project by readability matters. It's more or less what we did before today with the playground This is this has Less characteristics as properties for me they weren't enough to to set the ball That's why I I used some other because on CSS. It's possible to do that I have but what they say at readability matters is Everybody has have their own way of Optimizing for readability. So you have to try and Because it's difficult to do that you have to Know what is good for you. They are putting some machine learning on that and trying to Find that some clusters in order to have more or less Different styles. So which time is better for you and they are going to reach some results soon I guess Some other groups are working on that the readability group. You see this and they in this group That's Bruno mug that I quoted before They also take in consideration the branding. So the emotional part of Typography and that's important too. It's not only Something that you want to read but some other values And the last experiment I will show you it's this bionic reading Maybe you've seen it It's based on this concept of Smiling because of you Because they they are Mimic the fixation and saccadic movements we do and so you have this interesting thing you can Adjust some Fixation duration length of a variety of parameters, but not only those parameters some other lightness line with line space. We are more or less where we Where we were today with the same Concepts okay, thank you for your attention. Let me introduce Then we thank a host diversity fund that had me to With my trip to Greece if you are interested to have a look to this nice initiative and Thank you if I will answer questions, I will answer Yes, yes, I'll I'll publish so I'll let you have it And You know you said the font size is not always the font size. Mm-hmm. How does that affect? Accessibility, so let's say the minimum is 19 pixels. Yeah, but you select the font that Actually isn't 19 pixels high even though it's 19 pixels when you set it in the CSS Am I correcting in the stand in the font height? And the concept you showed so you have fun like this Sorry, that was the font size So that is not 19 pixels exactly that's a problem. Okay, so it would actually fail accessibility. Yes Well, well, that's a good point They say point, but I I don't know exactly that's the point that's difficult to to to to respect those guidelines because I think they were thought before the web font era and You don't need they don't deal with this problem. That's why I try to Measure the font I would I would say some not trust the actual value I would do like that. I mean, I'll try it and I test it. Maybe you can have as a reference Then the most used Fonts on the web. So you you say, okay, I have a different font. How can I adjust it? So that might be and CSS is going to help a soon also on that respect Okay, any other questions This might be a stretch, but I'm trying I'm making an Apple Watch app that displays the weather and I find it very hard to Optimize the text for this ultra small screen It's stretch, but any tips Look for a very good font. You are going to probably you're going to buy it because if you're going with Open for open source phones, you might have very good phones because they They came open Open because of a company big company open robot or flex is Very very nice font and it's there by Google because and they they open it But there's a lot of studies behind A lot of Fonts are made specifically for For a purpose. So you you might even work with It's a big problem. You might consider working with a type of refer and And have a proper font for your needs that might be a High-level solution Thank you other questions. Thank you chance. I Give you some other Tips on Variable fonts Maybe you know access practice to their playgrounds to understand How they work Or Well, if you are you want to discover Some characteristics of variable font. This is the book fonts dot-com Website is very rich of new Fonts and they are mixed Here you will clearly see that there are some font that are open source and they are good and some others that are Paid funds that are good as well And One interesting Website I would recommend is This side with a very strange name. What can my phone do? This is a precious precious tool You have downloaded a font you and You'll Drag it into that circle You'll have a description of What the font can do and Examples, maybe I'll show you an example because it's interesting See if I can So if you are going to Upload your font with font face on the website you it's extremely useful Here it is see if I can find a font somewhere I want to reduce them I Let's see if it's in it's a new have we have one here To drop it pick a phone Let's take I don't know Let's take a robot of Lex's and he doesn't have it here. Let's take another one. Let's take In consolata Another thing I would stress is the This word you have late in that in extended Vietnamese, they are the group of glyphs that that font contains So it depends on what you need you can have wider group of glyphs or shorter Let's say in consolata You see imagine you drop your font or you have to check one You see a lot of information about that font. You have a tester The language supported if the values of the Variable axis for example, this is the weight axis that goes from 200 till to 900 Another phone might have different values and you have the width value from 50 to 200 in this case You see they the name instances of a web of funds. So they are preset Values that the type designers has put into the font that Correspond correspond To the static font smallest so you have for example The various font Instances that the web designer thought were good choices among those axes or You can have This is a big area, but you can have some Other characteristics that are for example here is Fraction Let's see show on the numbers changes because of the That characteristic frack and you can Play with what we have in the font and what you can do with the SS that's very fine tuning, but some fonts Are very rich of these things and you can take advantage of that one or for example Numerators, this is not doesn't have so many. Let's try another one Francis this has different Axis Optical size. That's what I said before Let's have an example of optical size If we have something very This isn't going tiny for a Small one and this is for a big one in a big one you see The high contracts It's nice. You can read it perfect, but if you use this font size as this What it a Optical size with a font size. Let's say smaller Here you have sorry about that. It was really big Where is the font size slider? Here's it Let's do it Difficult to make them demos Wait So a font size is very small With a very high Optical size value is going to be very hard to read because the thinner strokes won't be right This font has a lot of other other interesting Axis weight or softness Wonky this is Yeah, show you you have a headache Maybe you see the end for example the lower case and it's changing And even creating again. This is crazy, but there are other axes are really really crazy For the CSS people here When you deal with this you have this property that's font variation settings That is a low-level property that means that if you Use it later on in your cascade of a CSS with Let's say Only one of these values not all for each Axis it will override it. So be careful With that it's not the same attitude that Behavior that the other CSS properties what can my phone do is very useful Any other questions Last question nobody Okay. Thank you Julia for everything that you told us. Thank you very much. I have a little Nice Thank you Yes, thank you