8 ms·

Two tips: - don't justify text, it doesn't look good and it makes text harder to (https://designforhackers.com/blog/justify-text-html-css/ https://designforhac

by rayrag 5y ago

Two tips: - don't justify text, it doesn't look good and it makes text harder to (https://designforhackers.com/blog/justify-text-html-css/ https://designforhackers.com/blog/justify-text-html-css/) - 'On this page' section is too long. And once I scroll down I don't see it anymore so I can't use it for navigation. Look at https://getbootstrap.com/docs/5.0/getting-started/introduction/ https://getbootstrap.com/docs/5.0/getting-started/introducti... or https://tailwindcss.com/docs/installation https://tailwindcss.com/docs/installation to see how useful can it be.

mkosmul 5y ago
Thank you for the tips. As for justification, I actually compared my "before" and "after" layouts and found the one with justification better for my taste. The link you posted has some very interesting thoughts, though, and certainly justified text on a web page is a completely different level of typography than text justified e.g. in LaTeX.
- forgotpwd16 5y ago
  Maybe it was intentional but bullet points aren't justified although the rest of the text is. Also text looks pretty big for me.
forgotpwd16 5y ago
Ironically I find the first article easier to read when justified (side-by-side comparison at https://ibb.co/9tvZ75W https://ibb.co/9tvZ75W). When not justified the uneven lines get my attention and I'm losing my reading rhythm. As the article lacks a published date, I do not know whether this is result of technology having advanced since. Nevertheless there're spaces that look bad around the images but maybe a better web design could help with this. Also there's the usual lack of any surveys that articles on design tend to have.
- bruce343434 5y ago
  The very first support link it gives disproves the article: hyphenation IS widely supported. In my opinion the article reads as if the author collected evidence to support his preference. Now, it does seem as if text justification is a highly subjective matter.
TacticalCoder 5y ago
> - don't justify text, it doesn't look good It certainly does look good for books and for LaTeX documents though. For the Web the problem is that it requires learning several new CSS properties and learn about some typesetting issues ("rivers" and "ladders"). The following does definitely look very good to me: https://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4 https://generatedcontent.org/post/44751461516/finer-grained-... We're 25 years in, at some point browsers have to get a proper hyphenation and justification algorithm. With a proper H & J algo and high DPI screen, I don't see why it couldn't look great.
- The_rationalist 5y ago
  Maybe it require some training but on my phone I find this example low readable, my speed of reading is slowed and my cognitive overhead/eye movements are increased. To me it's the kind of UX thing that look good if you don't look at it well but once you have to it's just plain inferior.
- inamiyar 5y ago
  Iirc the reason browsers don't have knuth-plass justification is because it runs in O(n^2), but even so my research tells me justification reduces retention because your mind retains the "shape" of ragged text. I don't have the article on hand but if I find it I'll add it later.
  - bruce343434 5y ago
    Do add, because citation is needed.
    - inamiyar 5y ago
      A bit late but [1] shows equal comprehension between justified and ragged-right but much faster reading speeds with ragged right (post-stroke patients in Russian). [2] shows slightly faster reading speed with justified text but less comprehension on a delayed test (also in Russian). [3] has no empirical data but cites articles and claims comprehension is equal between the two formats but ". Poor readers, however, read unjustified text more quickly than justified text." I would say it's not overwhelming, but I'd go with ragged-right to be safe. [1]: tug.org/TUGboat/tb38-2/tb119veytsman-justify.pdf [2]: https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf [3]: https://benjamins.com/catalog/idj.8.2.03sti https://benjamins.com/catalog/idj.8.2.03sti
wodenokoto 5y ago
“It’s just bad typography”. If you want to say that you need to argue against over 100 years of newspaper and book typography. Granted, this isn’t print, but if you want to make blanket statements like that, you need to defend them against a very long lineage of design.
- leetrout 5y ago
  We aren’t doing text layout for a fixed physical space. I don’t think it needs any more justification than that. It was good typesetting. It was probably never good typography.
  - minkzilla 5y ago
    Why does fixed space make it so that justifying is good and non fixed makes it bad?
    - true_religion 5y ago
      In fixed space, like newspapers, human editors would add or remove words in order to make the end result aesthetically pleasing. Non fixed space lacks this feedback loop, so you can end up with text that is both justified and awkward more often.
      - deleted 5y ago
        [deleted]
      - yakubin 5y ago
        LaTeX doesn't do any of that and the end result is beautiful. It's even better than what human editors produce.
    - RobertKerans 5y ago
      Because if it's fixed, can, starting with the first character, go through the text adjusting the space between words and letters (carefully and subtly so that optically it doesn't look as if there has been adjustment unless you look very closely) and swapping out words/changing sentences/re-ordering until the text fits almost perfectly in the space. (This is also why justification can't ever really _fully_ work on the web in a general sense, can only have an approximation and the question then becomes if it's worthwhile to have that or whether it's just more trouble than it's worth)
Pazzaz 5y ago
I think you should justify text. The article you linked is old and hasn't caught up to the development in browsers. It is correct about text being ugly if justified without hyphens but most browsers nowadays support hyphens [0] and have for some time. For a good example of justified text together with hyphens, see: https://www.gwern.net/Holy-wars https://www.gwern.net/Holy-wars. [0]: https://caniuse.com/css-hyphens https://caniuse.com/css-hyphens
- aoloe 5y ago
  When you justify text for print, you almost always have to manually tweak the result to avoid wrong spacing, bad hyphenation, rivers, ... Justified text and automatic layout do not (yet) go hand in hand. Left aligned text has also its issues but, most of the time you won't notice them on screen. The article you're linking looks better than average, but it feels a bit too much like a text wall to my eyes... I guess that the lines contain a number of characters and words that is big enough to allow a more even distribution, at the price of longer lines that are less comfortable to read. For me the rule is still that text that is automatically formatted should be mostly left aligned. But indeed, if you correctly setup the hyphenation, you can produce something that is somehow OK.
  - Veen 5y ago
    I suspect the wall-of-text effect isn’t caused by justification. Gwern is using first-line indents to signal a new paragraph instead of spacing them, as is more usual on the web.
hyko 5y ago
+1 for skipping justification, which universally looks like ass on screens. “What about books and newspapers?” I hear you ask, to which I reply: print had expert typesetters eyeballing the whole thing…and even then, some books and newspapers look like ass unless you’re squinting from 10ft away. Trying to make text fit in a box is an aesthetic choice, but it is technically inferior from a readability standpoint. It was usually paired with columns, which improve readability and would do so without justification.

by rayrag 5y ago

mkosmul 5y ago

Thank you for the tips. As for justification, I actually compared my "before" and "after" layouts and found the one with justification better for my taste. The link you posted has some very interesting thoughts, though, and certainly justified text on a web page is a completely different level of typography than text justified e.g. in LaTeX.

forgotpwd16 5y ago
Maybe it was intentional but bullet points aren't justified although the rest of the text is. Also text looks pretty big for me.

forgotpwd16 5y ago

Ironically I find the first article easier to read when justified (side-by-side comparison at https://ibb.co/9tvZ75W https://ibb.co/9tvZ75W). When not justified the uneven lines get my attention and I'm losing my reading rhythm. As the article lacks a published date, I do not know whether this is result of technology having advanced since. Nevertheless there're spaces that look bad around the images but maybe a better web design could help with this. Also there's the usual lack of any surveys that articles on design tend to have.

bruce343434 5y ago
The very first support link it gives disproves the article: hyphenation IS widely supported. In my opinion the article reads as if the author collected evidence to support his preference. Now, it does seem as if text justification is a highly subjective matter.

TacticalCoder 5y ago

> - don't justify text, it doesn't look good It certainly does look good for books and for LaTeX documents though. For the Web the problem is that it requires learning several new CSS properties and learn about some typesetting issues ("rivers" and "ladders"). The following does definitely look very good to me: https://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4 https://generatedcontent.org/post/44751461516/finer-grained-... We're 25 years in, at some point browsers have to get a proper hyphenation and justification algorithm. With a proper H & J algo and high DPI screen, I don't see why it couldn't look great.

The_rationalist 5y ago
Maybe it require some training but on my phone I find this example low readable, my speed of reading is slowed and my cognitive overhead/eye movements are increased. To me it's the kind of UX thing that look good if you don't look at it well but once you have to it's just plain inferior.
inamiyar 5y ago
Iirc the reason browsers don't have knuth-plass justification is because it runs in O(n^2), but even so my research tells me justification reduces retention because your mind retains the "shape" of ragged text. I don't have the article on hand but if I find it I'll add it later.
- bruce343434 5y ago
  Do add, because citation is needed.
  - inamiyar 5y ago
    A bit late but [1] shows equal comprehension between justified and ragged-right but much faster reading speeds with ragged right (post-stroke patients in Russian). [2] shows slightly faster reading speed with justified text but less comprehension on a delayed test (also in Russian). [3] has no empirical data but cites articles and claims comprehension is equal between the two formats but ". Poor readers, however, read unjustified text more quickly than justified text." I would say it's not overwhelming, but I'd go with ragged-right to be safe. [1]: tug.org/TUGboat/tb38-2/tb119veytsman-justify.pdf [2]: https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf [3]: https://benjamins.com/catalog/idj.8.2.03sti https://benjamins.com/catalog/idj.8.2.03sti

wodenokoto 5y ago

“It’s just bad typography”. If you want to say that you need to argue against over 100 years of newspaper and book typography. Granted, this isn’t print, but if you want to make blanket statements like that, you need to defend them against a very long lineage of design.

leetrout 5y ago
We aren’t doing text layout for a fixed physical space. I don’t think it needs any more justification than that. It was good typesetting. It was probably never good typography.
- minkzilla 5y ago
  Why does fixed space make it so that justifying is good and non fixed makes it bad?
  - true_religion 5y ago
    In fixed space, like newspapers, human editors would add or remove words in order to make the end result aesthetically pleasing. Non fixed space lacks this feedback loop, so you can end up with text that is both justified and awkward more often.
    - deleted 5y ago
      [deleted]
    - yakubin 5y ago
      LaTeX doesn't do any of that and the end result is beautiful. It's even better than what human editors produce.
  - RobertKerans 5y ago
    Because if it's fixed, can, starting with the first character, go through the text adjusting the space between words and letters (carefully and subtly so that optically it doesn't look as if there has been adjustment unless you look very closely) and swapping out words/changing sentences/re-ordering until the text fits almost perfectly in the space. (This is also why justification can't ever really _fully_ work on the web in a general sense, can only have an approximation and the question then becomes if it's worthwhile to have that or whether it's just more trouble than it's worth)

Pazzaz 5y ago

I think you should justify text. The article you linked is old and hasn't caught up to the development in browsers. It is correct about text being ugly if justified without hyphens but most browsers nowadays support hyphens [0] and have for some time. For a good example of justified text together with hyphens, see: https://www.gwern.net/Holy-wars https://www.gwern.net/Holy-wars. [0]: https://caniuse.com/css-hyphens https://caniuse.com/css-hyphens

aoloe 5y ago
When you justify text for print, you almost always have to manually tweak the result to avoid wrong spacing, bad hyphenation, rivers, ... Justified text and automatic layout do not (yet) go hand in hand. Left aligned text has also its issues but, most of the time you won't notice them on screen. The article you're linking looks better than average, but it feels a bit too much like a text wall to my eyes... I guess that the lines contain a number of characters and words that is big enough to allow a more even distribution, at the price of longer lines that are less comfortable to read. For me the rule is still that text that is automatically formatted should be mostly left aligned. But indeed, if you correctly setup the hyphenation, you can produce something that is somehow OK.
- Veen 5y ago
  I suspect the wall-of-text effect isn’t caused by justification. Gwern is using first-line indents to signal a new paragraph instead of spacing them, as is more usual on the web.

hyko 5y ago

+1 for skipping justification, which universally looks like ass on screens. “What about books and newspapers?” I hear you ask, to which I reply: print had expert typesetters eyeballing the whole thing…and even then, some books and newspapers look like ass unless you’re squinting from 10ft away. Trying to make text fit in a box is an aesthetic choice, but it is technically inferior from a readability standpoint. It was usually paired with columns, which improve readability and would do so without justification.