10 ms·
Not explicitly mentioned here, but worth bringing up: Text width should always be constrained to a maximum width to optimize for human reading. Every book ever
by stevebmark 4y ago
Not explicitly mentioned here, but worth bringing up: Text width should always be constrained to a maximum width to optimize for human reading. Every book ever printed has text with set within the same range for a reason. Full width text guarantees most users will have a poor reading experience.
- swid 4y agoI almost agree, but there’s a difference between number of characters and width, and also graphics and tables are a different beast. Personally, I think websites should fill up the available space, increasing font size if it makes sense, perhaps using resizing images. So, no - text should not be constrained to a maximum width. If width were a problem, billboards wouldn’t be a thing.
- xcambar 4y agoHave you ever seen a long text on a billboard? I guess not.
- swid 4y agoI'm pretty sure you misunderstood what I wrote. > there’s a difference between number of characters and width Billboards use large letters to fill the space, but normally they would be readable on a business card.
- xcambar 4y agoFair enough. But your point requires discussing nonetheless. You seem to suggest that fontsize should adapt to width to fill the space (seemingly to a billboard, as per your example). If the billboard technique was used on the web, I guess we might not have more than a handful of lines on screen (on a 16:10 or so). That would disable skimming on long texts and even more, barely display a single paragraph (that's a gut guessing). Plus, and more importantly, the distance to the screen is such that a font too big is not more readable. There's a tradeoff to he found for the fontsize that not only has to take into account the size of the screen but also the distance of the reader from the medium. Or so I assume.
- cerved 4y agothe maximum width for readability is in characters per line so it should be expressed in that
- graftak 4y agoTo add: which the em unit is supposed to do, and roughly succeeds in as a it equates to the width of the letter “m”.
- michaelsalim 4y agoThat's a great point. I gave it some thought and I think it's a matter of the relative distance from the start to the end from your perspective. Billboards are meant to be read from far away. So even though the physical width is large, we perceive it to be much smaller. Maybe similar to a big banner on a Desktop monitor. Imagine reading the billboard at a much closer distance, say 2 meter. You'll have to move your neck from left to right. It doesn't matter how big or small the font size is. As a subjective test, I lowered the font size of a random article to see if I would have trouble reading it. Other than having to focus more to make out the text, I don't have problems reading the entire paragraph. On the other hand, removing the max width made it more uncomfortable to read. So the distance from where the text will be viewed from is an important factor to take into account. Phones, Desktops & Banners all are viewed from different distances.
- jmull 4y agoIt seems clear from context they are talking about maximum width *in character*.
- isaacremuant 4y agoI don't like that. I can adjust the full text width by adjusting my window but if have a big wide screen and you limit it, then I'm wasting a lot of what I can see. Give me customization, not "alleged optimization" that turns out not to be so
- stevebmark 4y agoDon't confuse constraining an entire website's width for constraining the text reading width. You can gracefully have maximum reading width text columns with other content to the left and right of it to maximize real estate. Also, don't ask users to resize their browsers to accomodate for a site's poor UX. That's called "blaming the user."
- ryandrake 4y agoAs a user, I expect to use my browser window to resize the content in my browser. Please don’t second-guess my preference. 9X% of web sites don’t do anything sophisticated, with columns or otherwise. They hard limit the content width regardless of the user’s window size, resulting in a tiny sliver of text.
- stevebmark 4y agoWhy do you think constraining the reading width of a text column means it won't change as you resize your browser? Don't confuse your preferences with how far apart human eyes are. Your preference isn't relevant here.
- cerved 4y agoparagraphs are less readable past 90-100 characters width
- ryandrake 4y agoI hear this a lot, and as a user I simply don’t care. I deliberately bought a giant high resolution monitor that I want to fully use. If I stretch my browser window full screen, I expect your web site’s content to expand to fit. I don’t care what some researcher thinks is “readable”. I wish web developers would stop second guessing the user.
- sorenjan 4y agoNewspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns https://developer.mozilla.org/en-US/docs/Web/CSS/columns
- galaxyLogic 4y agoI think that shows that different mediums need different solutions and also different content. Newspapers don't have scrollbars. So they use columns. This may be why phone-apps are so popular, their content is designed to be viewed only through the app. CSS columns is cool, I didn't know about it. But not sure where I would use it either.
- SquareWheel 4y agoPersonally I find column-style layout to be more difficult on the web. Though probably just due to lack of familiarity. As one example, the "Golf with your Friends" subreddit always throws me for a loop due to its use of columns. I have no idea how to read it! https://old.reddit.com/r/GWYF/ https://old.reddit.com/r/GWYF/ Note this example will only work on a widescreen desktop browser.
- 7steps2much 4y agoJust a quick note: It works on none widescreen desktop browsers as well if you zoom out far enough. Or at least it does on my 14" with FF 106
- sorenjan 4y agoColumns that you have to scroll like that is not user friendly, their height needs to be limited to less than the window height.
- robertoandred 4y agoColumns like those are a bit awkward when combined with scrolling long blocks of text. When you reach the bottom of one column, do you need to scroll back up to get to the top of the next? Or do you have the column fit the height of the screen and have some sort of horizontal scrolling for as many columns as it takes.
- dv_dt 4y agoLarge margins are also distracting and a waste of human time. I wish browsers or sites would automatically flow the text into n columns depending on the view window size. It's not trivial but if one is optimizing for reading, then extra window scrolling to get to newer sections of text is not particularly optimal either.
- ryandrake 4y agoWeb sites should just serve the text and let the user-agent make the readability decision and decide how to appropriately render it. Browsers have handed over way too much layout and stylistic control to web developers.
- nottorp 4y agoText in books tends to take the full width of the page (minus margins ofc) doesn't it? Why should you waste most of the horizontal space on my monitor then? Do you have trouble reading HN in a maximized browser window on a wide screen monitor? I don't.
- thiht 4y ago> Do you have trouble reading HN in a maximized browser window on a wide screen monitor HN comments happen to be capped at 1215px (which I find too long on big comments), and comments usually have line breaks in between that make them not reach the max width. > Text in books tends to take the full width of the page Yes. Not the full width of both pages at the same time. Pages on a book have a vertical format, not horizontal. I guess columns would be somewhat ok on the web, but it's not really comfortable either... as we can scroll. Coverage of the screen with text is the wrong metric regarding legibility.
- nottorp 4y agoI don't know what the right metric is but i simply can't read those sites that present you with a mobile-like layout with two paragraphs per screen on a 24" monitor. If the text is too small I can hit Cmd - Plus but with those i have no recourse.