 Thank you all for for being here and thanks to the organization for trust me trust in me and Well, let's talk about phone about design Well, I am Anna Cirujano Anna Kiryano for you and I am from Spain and I Am a visual and business owner in Spain. I am freelancer. I'm designer and I am in love with typography and with WordPress and you can see my contribution to WordPress So and One of the most important aspects of communicating with with type Is to establish a strong typographic Hierarchy visual hierarchy tells people people where to look And what things are most important? Look at the typography of these well-designed magazine covers There are many different type faces different weights lighter and bolder and different stretchers Condensate or expanded. Okay These variations are used to create visual tension and hierarchy control the pace and guide your eye Phone var variations can also be used in order to add emphasis for smaller sizes without reducing a legibility These are some samples of printed design, but what happens with web design? Could we design? Sound thick something like this for a website When you set a variation in a font The software uses a specific font file thought for that variation a standard type family Can have up to 20 or even more font files On a website using too many fonts can have a great impact on performance in 2016 some of the biggest tech companies around the world Signed off on a new standard that is part of an update to open type variable fonts Variable font is a single font that acts as many fonts and These results in incredible performance benefits Here is a website performance test of the liver Franklin whole typeface family compares to a website using liver Franklin variable font The variable font Results in fewer html requests a smaller file size. So like larger savings of downloaded data And faster loading speed Each variable font has different font variations defined by the font designer in the font file There are five Reservative or registered axis weight with optical size italic and slant Let's see the weight Here you can see the difference between a full bold and a real bold a full bold is created by the browser If the font file is missing and a real bold is designed by the font designer Using real weights is very important for a better legibility Also a greater beauty. These are the weights you can set using a standard font Using variable fonts. You don't just have those in the visual master weights You have access to all of the values in between You can set 102 or 547 Because the axis can be interpolated. So using CSS we can animate these values to get a smooth transitions I'm going to activate the video. Okay. I know Chililik Russian. Okay. Maybe this one Just click okay, you can see the the axis weight Variant okay changing changing the way from 30 50 to 1000, okay It's an example Okay, so now They activate or yeah here Okay, okay So let's see the width the axis with This is the width axis just like weight you can set and animate a range of values of width Okay, you can you can see it? switching from 60 60 and 100 or or with Condensing and expanded expanded A variable font can contain many different axis that can do different things at the same time In that graphic you can you can see the Letters the characters changing the width axis axis and the weight axis at the same time So let's see optical size Optical size is an axis to improve the legibility in smaller sizes on the right You can see the glyphs for bigger sizes with more contrast and detail on the left for Smaller sizes with less contrast and detail And this is an example More contrast and detail and less contrast With just a one font file Let's see the italic and slant axis You can set a more or less slanted text and you can set italics You can tell the difference between a slanted text and Italic you can see for example a that is so different or the P Character that is so different. So it's not the same slanted text or Italics are really talic. Okay, so how can we use variable fonts in our WordPress website? A browser support is really good Actually with this level of support We can use in variable font fonts now or at least experiment with them The way we use variable fonts in our CSS is pretty much the same as the way we use fonts now in our WordPress website We set up the font using font face and we need to provide a fallback for older browsers The main change is that we need to define a range of values For example, we can define 200 to 600 for the font weight and Out of this range, we can't declare any value Once you've done that you declare the values for the properties as you usually do in CSS You can also use now Google fonts as though it's in beta version, but this is the way You need to declare them to import the font family and declare the range of values you can use In the presentation we are going to share with you You can find a link to more information about how you have to declare your CSS As you know, the new theme, a standard theme, that is included in the new WordPress version 5.3 that is about to be Including variable fonts, so you can As you know, it's open source, it's WordPress, so you can check how it's Doing, how it's declaring, how it's using this interbar variable font and See how is the code made? All right Okay, these are all the values you can declare for controlling any of the standard axis, the five standard or registered axis Let's see the custom axis I have another video here The type designer can create custom axis that provides the developer with the power to control every aspect of a font For example, this is a custom axis for controlling the serif You can create a font with more or less serif. I don't know if you can tell, but it's a phone switching from Serif and non-serif with just one file This is another video We could also change the height or depth of Ascenders or descenders as you can see in this video Custom axis can be created for controlling every little detail of the glyphs shape Since we can create any shape in a font file The font designer can also create something like this or this This is just one glyph CSS and a keyframe animation Let's see how we can make it Okay In this example, we can see a variable font with the vectorial drawing of a horse With an axis called time and a keyframe animation in CSS This is all the code we need to make this animation But how is the font file made? Yeah, this is the variable font file. We have just one glyph with 16 keyframes as intermediate masters That's it The cover is a variable font that has 15 custom axes the versatility of the cover is a good sample of the power of variable fonts When using a variable font With custom axes, it's important to specify every single axis in the variation settings Even if the value is zero Let's go over Some real examples of variable fonts as we have solved the problem with performance And we are not limited by a technical issues We don't have to worry about how many font variants are loading in the website In this example, we can choose a typeface different typeface for headlines of good news and we can choose a different one for bad news We can make the character change on hover Using variable fonts allows us to make things more readable on smaller or larger Screens like an Apple watch a projector a laptop or a phone We can modify the part of it to be more readable and more legible depending on the environment In this example When the screen when the screen is smaller the characters are nowhere We don't need to sacrifice design for performance Creativity can can start to determinate our choices in steam instead of technical limitations Through interpolation we can shift forward or backward smoothly to highlight pertinent information for for a particular distant range And we can create sufficient contrast based on the user's environment Maybe you can't see it but when it's not light the the character changes to be more readable Here you you have some resources for funding and testing variable fonts Access practice is for for funding and testing also view fonts or Play type detail is for You can write your custom text as you can see This is another another resource for for testing funding Okay, and this is a very interesting website because you can just drop a font and Get the information about that font what axis are designed for by the A font designer and how you can declare the CSS and also export the the CSS to use that font and I would like to recommend you some people that are experts in variable fonts that Jason Pameltan Pamental he has a very good newsletter with the with the Latest news about variable fonts and I recommend you to to follow him and also Mandy Michael that she has a lot of good examples also some examples with Variable fonts CSS and JavaScript Yeah to sum up some benefits of the benefits of using variable fonts Using variable fonts help us improve the performance of our workers websites We can create better experience for our users by making content more accessible Even more we can create a better way to communicate. I Hope you enjoyed this presentation and I encourage you to start using variable fonts Thank you for the presentation you showed a very interesting example of the animated glyphs and I'm wonder how it's How it's achieved in terms of the technical side. I mean, is it really like a single shape for each Value of the axis Yes, you can see the font file you need a Specific so we're in order to design the the font Yes, it's not actually changing the shape. Yeah, it's having a different shape Vector shape for each of these Frames, right? I mean it means it would mean that it will increase the size of the font if you Yeah, it's animation in CSS with keyframes. It's normal CSS animation. It's a standard Yeah, I mean When you design this font to create those variations on the axis do you need to design a different shape vector shape for each of the Yeah, you have You have 300 characters in just one phone file to to draw Every save you can imagine or even in colors because we have Color phones support So support and and we can draw everything everything we can imagine. Yeah, you see just one phone file 300 characters. Yes, but even more this font file actually contains like 100 different shapes for a single letter it means it will increase in the size the first yeah, of course Yeah, thank you What do you think what is the best way for example for the font size units on the responsive? Can we for example create font size depends on the user screen like with with a min and max limits I Don't know if I get your question, but I best units. Yeah a good question Could be Always flexible so you you have to do you should use M or RAM or EM Because it's always that depending on the width of the Device You never Set in pixels the browsers a Rendering pixels was always a declare in em or are em and There are that units in Relative to the viewport, but these units are not accessible we cannot use RAM or EM because it's depends on the Routage TML and the EM depends on the RAM. I don't remember their parent the parent yeah font size so if we don't change on responsive the root font size we It doesn't affect any with the RAM. So What do you think maybe you have experience to use? depends on the font on the Window screen size like with Yeah, the before people units. Yeah with em you have to be more You need to Do a good planifications Yeah, yeah So you can use RAM, but a view for units is not accessible because When we are when we design or Code a responsive websites. We are always em have to be very Care about we have to care about the user in in In the last The user can change the the font size in in the in his or here her Browser So if you set the font size depending on the width of the viewport you are not respecting respecting the user set So it's not it's not accessible You can think about because media media queries are not working here because Think about a TV or a projector You are setting maybe a media query with 1900 pixels or em but It's not the maximum size or the screen You know the the maximum screen. So it's always better to to declare in in that Em or Yeah Thank you for the speech. This is the first time I hear about the variable fonts, but I'm a backend developer, but anyway I have a question. How big is that file with the horse? Excuse me, how what is the what is the file size of that file with the horse animation? It is possible. Yeah, I don't remember actually, but it's Not not too much I'll I'll I'll tweet this for you Thank you very much. Thank you In Guiana, I have one small question As a regular user of a website, I'm using some Google the fonts I'm happy users are not so happy because they need to wait while all those Google fonts are loading so Does Google font already supports these variable fonts and if yes What benefits I will get if I just enable or use variable font without any other Styling or animation as you showed us You can use a Google fonts, but there are some just 10 or 12 Today a fonts now Google fonts and it's not many fonts now and There are in in beta version, but you can start experimenting with them and the benefits Or you seen what what is your question? So I'm asking if I will switch to variable font Absolutely, I will take the same one and just use the variable font version. What benefits it gives the benefits is performance The main benefit is you can you can respect the shape of the character as I am for example the Real italic if you don't have the file in your server or or Making a request to Google font to that specific variation for the italic You are making a full italic. No real italic. So you are getting slant just slant, but you need a Real italics for a better user experience and also the This optical size you you can get the real shape of the letter And change changing depending on the screen and this is automatic And also the this one you can you can use a real bolt. It's not just Bordered in the letter. So it's the letter Boulder designed by the phone designer. So it's the safest better for legibility and for Forgetting the the beauty of the of the letter with their contrast Yeah, it's for better user experience and if you if you And Get this one in now you need a minimum three font files But now you can use just one for files with open type with more tables and And you have all these benefits for the Thank you You're using Phone sorry Phone display CSS feature From this place. Yeah What is the question about Yeah, and which type you recommend this is for and when the browser is not Get is not downloaded the font you can And Sweets to swap in order to not showing the Back a font a fallback font so It depends on if for you is important the Exactly typeface or for you is not so important. Maybe you you can use a Serif or sensor if The browser is a loading the font quickly because it's the user have the font in the in his bro or her browser browser So if you if for you is important Because you know that the the font Chains their their size depending on the what typeface is a You you can change this value Dependent is the most important for you or not Swap depending if for you is important because the typeface is changing your Your design because because the the typeface is changing the the size of the font Or not or for you is not Important, but the user if they if the user get the text before I thought they don't get your typeface Okay, you you don't use swap But it's if it's for you if for you is important to not not show the text if you don't download it Have downloaded the the font file, okay The other option. Thank you