What is "VW" font-size?

Muhammad Ahsan Pervaiz
A free video tutorial from Muhammad Ahsan Pervaiz
UI UX Designer + Freelancer + Web Developer
4.4 instructor rating • 16 courses • 74,749 students

Lecture description

Learn about VW (viewport width) font-size and when and where to use it in CSS (with coding example)

Learn more from the full course

Typography for Designers & Developers - Don't suck at design

Shift your boring designs to Dribbble level by learning Font Pairing, Web Typography, App Typography & Vertical Rhythm

08:35:43 of on-demand video • Updated December 2020

  • Create elegant web & Mobile app design by selecting and pairing meaningful fonts
  • How to use white space effectively by using Vertical Rhythm and Modular Grid
  • Dramatically improve your boring designs with Modular Grid & Baseline Grid
  • Learn about Typography Classes and Anatomy
  • Learn about how to use line-height and letter spacing effectively
  • Learn about IOS App Typography and understand different IPhone Screen siz
  • Learn Google Android Typography, its scale and its SP unit of type
  • How to connect your Photoshop Screen to IPhone or Android Device
  • How to balance your design using LEGO Blocks method
  • Step by Step coding exercises to apply Baseline Grid for Developers
  • How to show baseline grid in HTML page with just one line of code for Developers
  • How to use padding, margins and other elements to create Vertical Rhythm in CSS for Developers
  • How to use Vertical Rhythm in Bootstrap for Developers
  • Learn when to use em, rem, vm or % font-size units for Developers
  • How to set up Typography Scale using online tools easily for Developers
English [Auto] Head is a bit of introduction to this VW awesome you know. And I really love it how it expands and contracts on responsive websites. So here are three headings. And then we have a paragraph over here and you can see paragraph is very big. Let's let me explain why it is very big. OK. Now if we move on to this container Saudi style. SS Okay so what is happening over here. First thing is I am in size hundred percent. OK. Also this container which is 80 percent and full size in this parent container is also 24 percent. OK so you can see all here this VW unit is relative to the size of this browser window. So it has no effect of this 100 percent or this for size 24 pixels. So what is happening is I have searched for a for size of four point five. VW You can experiment with it. OK. So you can see it is very big. This paragraph size also the headings are very big headings size sizes are also in B.-W 15 viewport word. And then we have line height things margins and set up everything. Also heading to heading 3. And the small text is in REM or you can see if I try to use this VW then maybe we can use 2.5 VW or like this. And let's see how it is going to look like our smaller decks or small texters like this. OK. Now for headings it is very good but for paragraph text it is not really nice. So let's shift to our responsive view. OK. Now you can see as I expand and contract my viewport size you can see over here at the top 623 Biggs's I pressed control shift M on my firefox. And if you are using Chrome I think you can shift to F 12 and press F 12 and select this one toggle device. It is also control chiefdom OK. So you can see it on different sizes like this like this and like this. So right now I'm using this Firefox browser. OK now you can see our heading size is relative to our view board rate and it is really responsive. As soon as we contracted and let's move on to this 320 pixel rate which is iPhone 5 or 4 I guess. OK so this is hard text is going to look but you can see the small text is really suffering. It is very small and headings size is good on small devices but it is very large and slightly barograph text is very large on large screen. So this is not a very good practice. So when you are using this video you try to use it just on the headings like having one two three. Not the small headings because they're going to get very small so very big headings can get good benefit. And if you are using a paragraph I think you should use REM value or something closer to this like one point to rim or here. So it is going to look good for also for the smaller text. We are going to use rim over here so I'm going to use one drem over here for the small text or see for shared. So this is how we can use this VW unit and try to avoid the things I mentioned here don't do NOT use it on paragraph text. So let's move on to the next lesson.