Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

FlowType: font-size and line-height based on element width

simplefocus.com

Post reply on HN
Print view View original

31–40 of 55 posts

Re: FlowType: font-size and line-height based on element width

#31

Post by ithkuil »

crazygringo wrote: post #23

PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, it's breaking my browser zoom , so it's…

I bet that this can be useful in some cases, don't assume that it has to be used to present paragraphs of flowing text, as in the demo. For example MS Excel has this feature for shrinking the font size when you shrink a column, and some users finds it invaluable. This library could help implement this feature in a web based spreadsheet.

Re: FlowType: font-size and line-height based on element width

#32

Post by crsmithdev »

Love it. This is great for some very specific use cases (thinking about wall displays / large dashboards). It is definitely NOT for accessibility or for the bulk of text on most web pages.

Not every library / tool has to be universally applicable to be useful.

Re: FlowType: font-size and line-height based on element width

#33

Post by dmarusic16 »

crazygringo wrote: post #23

PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, it's breaking my browser zoom , so it's…

As a web designer, I despair of users upping the font size and screwing up the words-per-line. Which is why I like Safari's iOS-like pinch-zoom feature. I do wish all browsers would move in that direction and in the end disallow users to arbitrarily up font sizes.

That said, crazygringo's point is valid insofar as people do up their font sizes as a matter of course.

Re: FlowType: font-size and line-height based on element width

#35

Post by weego »

This is entirely the wrong solution to a problem that doesn't even exist. In actual fact the problem is fonts are too small on my mobile devices so I'm constantly zooming in... why would I want my on screen text to start off a couple of pixels high?

Also, the whole notion (and seemingly a sub-trend of responsive design) of page content (fonts/images) scaling to try and maintain structure when the page is resized is naive to the point of being ridiculous.

Re: FlowType: font-size and line-height based on element width

#36

Post by indubitably »

dmarusic16 wrote: post #33
crazygringo wrote: post #23

PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, it's breaking my browser zoom , so it's…

As a web designer, I despair of users upping the font size and screwing up the words-per-line. Which is why I like Safari's iOS-like pinch-zoom feature. I do wish all browsers would move in that direction and in the end disallow users to arbitrarily up font sizes. That said, crazygringo's point is valid insofar as people do up their font sizes as a matter of course.

Yes, those silly people with bad vision.

Re: FlowType: font-size and line-height based on element width

#38

Post by sneak »

indubitably wrote: post #36
dmarusic16 wrote: post #33

Earlier quoted context omitted.

As a web designer, I despair of users upping the font size and screwing up the words-per-line. Which is why I like Safari's iOS-like pinch-zoom feature. I do wish all browsers would move in that direction and in the end disallow users to arbitrarily up font sizes. That said, crazygringo's point is valid insofar as people do up their font sizes as a matter of course.

Yes, those silly people with bad vision.

He did not say that he wishes for people not to be able to make things larger.

Re: FlowType: font-size and line-height based on element width

#39

Post by spankalee »

dmarusic16 wrote: post #33
crazygringo wrote: post #23

PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, it's breaking my browser zoom , so it's…

As a web designer, I despair of users upping the font size and screwing up the words-per-line. Which is why I like Safari's iOS-like pinch-zoom feature. I do wish all browsers would move in that direction and in the end disallow users to arbitrarily up font sizes. That said, crazygringo's point is valid insofar as people do up their font sizes as a matter of course.

Try setting your text container dimensions in em then.

Re: FlowType: font-size and line-height based on element width

#40

Post by Chris_Newton »

crazygringo wrote: post #23

PLEASE do not use this. Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question. But that's only once you've chosen the most legible font size . You're supposed to adjust your column width to fit an appropriate number of characters, not adjust the font size to your column width! Adjusting the font size is completely backwards, and worst of all, it's breaking my browser zoom , so it's…

Yes, the ideal ("most legible") width for a column of text is ~60 characters, no question.

We can reasonably question what makes a good line length as well.

You have to define what you’re trying to achieve first. For example, a line length that is subjectively pleasing to readers in a certain context might not be the same as a line length that optimizes measured reading speed or retention.

Once you’ve done that, differences start to emerge. During research studies, readers have often preferred shorter line lengths (typically around 40-50 characters) over longer ones (say 60+). However, in terms of reading speed, lines as long as 100 or so characters have sometimes resulted in better measured performance. Please note that I’m oversimplifying horribly here, both ignoring established confounding factors like font and line spacing, and ignoring context such as screen vs. print or paged vs. scrolling presentation.

So, while the old rules of thumb like “two alphabets” seem to be reasonable starting points, we shouldn’t assume that they are optimal in all cases.

Post reply on HN