2.3 Working With Typography
In this lesson, you’ll learn how to set up the text properties so that you get maximum compatibility for the form controls.
1.Introduction1 lesson, 01:47
2.The Basics of Styling HTML Forms5 lessons, 32:32
3.Advanced Techniques for Styling HTML Forms5 lessons, 48:32
2.3 Working With Typography
Welcome back to the course. In this lesson, you're gonna learn how to setup the text properties, in order to get maximum compatibility for your form controls. So, let's begin. I have another simple example here in code pane, it's a form similar to the one I showed you in the previous lesson. Except this time we also have a text area added, and also a Select. So when it comes to typography, you'll find that just like with the appearance, there are certain differences between browsers, and between platforms. So, for example, here's how these elements look like on Safari, on Mac, iOS and pay close attention to the typography, right? So the type faces that are being used. And now let's switch to Firefox, and notice we have some minor differences. The typeface being used on the date picker is actually a Serif, while these other ones, like search and text inputs, are San serifs. Again, in the text area. We have a serif type face. On the Select and buttons we have sans serif. If we go to Chrome, we can see that the date picker is using a serif. But all the other elements are using san serif, including the text area. All right, so it's a lot of different things between browsers. And you look at this on Windows, you'll find that on some browsers, some of these elements. I believe it's the input type button, it is also a Serif typeface, while the other buttons are using San Serif. So again, differences between browsers, and between platforms. So how do we fix this? Well, very simple, this is happening because these elements with the problems that I showed you, don't inherit the correct font family, and font size. So it's simply a matter of targeting those elements. I'm gonna say button, Input, Select, and text area. And I'm going to set font family inherit, and font size, 100%, right? So immediately we can see a change here. You will see that some of the elements now have the correct font family, like text area, text input, this button here, and also they have the correct font size, but not all of them. Notice the Select here, still uses San Serif, Search still uses Sans Serif,. What about the other browsers? Lets check this in Firefox. Well, Firefox works, beautifully. Notice that my new changes are now reflected in all. Controls are all form widgets. What about Chrome? For Chrome, we can see that we're almost there. We have the new font applied. Here are the new typeface I should say, in the Select, but not on the search. Now on these buttons, so to make that work cross platform, we need to also set appearance to none. Okay, so that will fix the problems. Here in Safari, let's see in Chrome, Yep, it also fixes those problems in Chrome. And Firefox was working before, but now we have a very clean slate to work on. So, just in case in the future you're developing, and you're styling a form, and your buttons don't look right. Remember that some form elements simply did not inherit the correct font family from their parent, and this is exactly what we're doing with this property right here. Fun family inherit basically means, take whatever font family, the parent of those elements has in this case is the form element, and apply it to these elements. All right, now that we have the topography all sorted out, let's move on and learn about working with the box model. And the box model is responsible for properties like width, height, margin, padding, and border. So in the next lesson, we're gonna check out how we can work with these properties, and the form elements. See you there.