The most recent and, dare I say, exciting development in measure? Its role in responsive web design. More designers are using line length to help determine break points in a responsive structure! A good, comfortable font size is also necessary for setting readable text.
This rule is old news. But given the number of responsive websites out there that make text too small or too big in order to achieve an ideal measure, the rule bears repeating. The text will simply be way too tiny to read on a small device such as a phone. When designing a responsive website, start with a comfortable font size and an ideal measure to help determine break points. But when the time comes as it always does , let the ideal measure go.
Text already looks smaller on hand-held devices than on larger devices. This is fine because people tend to hold small devices closer when reading. Current popular wisdom is to preserve the measure by further reducing the font sizes for held-held devices. In practice, retaining a comfortable font size as much as possible better preserves readability. The result will be a less-than-ideal measure but a more comfortable reading experience.
When designing a responsive website, remember that measure and font size affect not only people using hand-held devices. The majority of people still use larger devices, such as laptops and desktop computers. Some simple responsive structures keep text in a single column that expands and contracts with the size of the device. This is fine because people tend to place large devices on their lap or on a desk while reading. But overly large text forces the reader to slow down and adjust how far they skip ahead as they read.
Reading horizontally becomes cumbersome, and the reader will start to skip vertically down the left edge of the text. Current popular advice is to preserve the measure by increasing the font size for large devices. For example, the one-column structure below has an ideal measure.
So far, our focus has been on the relationship between font size and measure in responsive web structures. But line height also affects how people read.
Because readers scan content both horizontally and vertically, lines of text should feel like horizontal lines, not like woven fabric. A line height that is too tight could undermine horizontal eye movement and encourage scanning down the left edge. You achieve the best results with em but it can also be a bit more tricky to work with than pixels. Regardless of which one you choose, your layout will have to be in a fixed width if you want to achieve an optimal line length for the majority of your visitors.
Here at baymard. With a pixel wide article container, we end up with about 72 characters per line. Do you know your line length in characters? Is it within the range? It should be, if you want your visitors to have a good reading experience.
Share: Twitter Facebook LinkedIn. Comment on LinkedIn. Users Continue to Double-Click Online. Improve Validation Errors with Adaptive Messages. Joshua Lay November 1, My thinking would be that mobile displays already force a short line length; due to screen width. The main crux would be getting a good font size.
Since a smaller font becomes harder to read, but fits more content. A larger font would be easier, but fit less on a line and increase scrolling. Jamie, Baymard Institute November 1, CareActive August 28, Leon November 2, Apart from the fact that other elements colour, font face, font size, leading etc. Jamie, Baymard Institute November 2, William Hudson November 3, Your text on this page has generous inter-line spacing, but if it were half what it is now, the lines would have to be shorter to be read effectively.
Christian, Baymard Institute November 4, Yes great point. Inter-line spacing is definitely closely tied with line length, we might take it up in a future article.
John Nunemaker November 3, Karen November 3, Great post! Jose Granado November 4, This was interesting to read. Vladimir Carrer November 4, A fine initiative, many sites will surely benefit from that project. Great to see that we each came to the same ratio. John Newman September 14, Maria Malidaki November 4, Very interesting post : How about suggesting limits for the width of the layout instead of having it completely fixed or liquid?
This way you can balance between adjustability on web browsers and keep a good line length. Jamie, Baymard Institute November 4, Setting a maximum and minimum width — a range — is certainly a viable solution. It lets the user control the layout to some degree without ever hurting readability. Caroline Jarrett November 4, As so often in typography and reading, you start tweaking one factor characters per line and then you have to begin thinking about other factors William Hudson: interline spacing, Joshua Lay: mobile i.
Here are some other things that are worth thinking about: - the type of material. Typography on say a road sign would have different considerations. And there are many more. Welcome to the fascinating world of usable typography — and the equally fascinating, related world of aesthetically enjoyable typography. In general, my lines run between 40 and character columns. Missy November 22, There is no contrast. David Starr January 1, Love this! John January 1, It covers line-length in relation to character width and optimal legibility on a per-typeface basis.
Arial is, of course, a sin against humanity. DRoss January 2, I agree and about line length and readability but when a font is a little too large it kind of defeats the purpose. I usually see it done by designers who are mainly print designers. Sergio January 2, Charles Roper January 21, With a " consists 69 characters, including spaces. Christian, Baymard Institute February 13, On my combination Chrome 9, OSX The specific line you mentions measures 67 characters on my combination.
Justin May 22, Why is this article so painful on the eyes? In CSS the width of a box is set using the width property with any unit of length, for example:.
When typographers set the measure and text size for printed media, those dimensions are fixed and unchangeable in their physical manifestation. In this regard, the Web as viewed on-screen is fundamentally different to print because the medium is far more under the control of your readers. In the preceding example, column 1 has a fixed width: it has been set to px wide.
With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line.
0コメント