Optimal Line-Length for Web and Mobile

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

Lecture description

Line length is important in readability so we will learn what is the Optimal line length for Web and Mobile and how we should handle it

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] One of the biggest factor about readability is lying and it really affects your credibility. And now the question arises how much lent a line should have in a paragraph for optimal reading. OK. Now some say 65 70 correctors per line and 40 collectors per line or something like that. I have seen a lot of articles and different books and the ranges from 45 to almost 85 characters per line. The optimal in Novi this line lent optimal line. And so the problem is if you have ready to do long lines then the user or reader needs to move their head from left to right to read that line. Now if you have a very short line then they have to jump from top to bottom line to line again and again. OK. So this is a very this is going to produce fatigue in your user even their eyes or head or maybe some other muscles. OK. From my experience the connectors if we translate characters to words that are almost gentle 17 words per line is optimal. They might be 19 or 20 depending on the length of the word but it is almost the average. OK. Now one of the effect is for size. If you have a good line and then you switch the form to the smaller form then you have a lot of words in the same space and you need to change the line entirely OK. Now if you have. If you try to switch to small for then the line length is very big and you need to read the long lines. So this is one other factor so choose your Forsythe's wisely. So the line length is optimal. No. What about more biol and websites so the more buyers have small screens so I think generally that there should be a bit more bigger bodied X should be bigger. So no normally on buyers body text or the paragraph's are basically 120 percent of the size of the paragraph's on our desktop website. So if you are developing a website all and showing different views of that Web site on mobile my desktop and tablet then you should take care of these. OK. Also on mobile phones the lines will be less longer because we have less space. So some of that line and principles don't apply here. Also you need to shift the headings size the line height too. So all these factors you need to cover for them or Biles and on desktop if you are a developer you need to use media curious to adjust the size for the optimal line length and readability. So this is all about the optimal line length and how we are going to use it on more buyers and desktop designing If you are designing for mobile or desktop. We will dig in deep into all this stuff on mobile and desktop sizes. And the last two sections of our course. Lets move on to the next lesson.