clagnut / webtypography

The source code for WebTypography.net, a practical guide to web typography.
WebTypography.net
Other
827 stars 120 forks source link

The design of the website is not compliant with the rule 2.1.2 #23

Open kuba-orlik opened 8 years ago

kuba-orlik commented 8 years ago

Rule 2.1.2 says that the measure for one-column text should be 45-75. The measure on that very page as displayed on my PC is well above 90...

Paul-Browne commented 6 years ago

I count 120 on my full HD monitor 😆

clagnut commented 6 years ago

Back when monitors were far smaller (when this was originally designed), this was fine. Please feel free fork, fix for modern monitors, and request pull. The beauty of open source.

bakert commented 5 years ago

I tried to fix this by simply adding max-width: 30em to #main but of course it's not that simple.

Because the other widths are mostly in percentages a strange thing happens to the out-dented numeric part of the chapter heading:

screen shot 2018-10-28 at 17 25 54

(As well as leaving a big gap to the right-hand side content.)

This actually happens at very narrow widths even in the current design:

screen shot 2018-10-28 at 17 25 31

but it only shows up at those very narrow widths.

I wonder if a general effort to switch from percentages to ems/rems would be worthwhile or if there's something simpler we could do.

jamespatrickgibson commented 4 years ago

The browser support for measure using the ch unit (character) is very wide, perhaps set all the classes for paragraph copy to max-width: 65ch; or whatever measure seems reasonable for the body copy size.

Hope that helps!

clagnut commented 4 years ago

The browser support for measure using the ch unit (character) is very wide, perhaps set all the classes for paragraph copy to max-width: 65ch; or whatever measure seems reasonable for the body copy size.

Thanks - feel free to fork, makes changes and submit.

bakert commented 3 years ago

I put up https://github.com/clagnut/webtypography/pull/39 for this which uses 66ch as the width for .main p. It still has some of the issues I describe above at high and low widths but I think it's better than what we have now which, as noted by here, breaks our own rules.