This is neat. I think it would be more helpful as a learning tool if it showed the difference between user input and the goal. The triangle indicator communicates what you should have done differently, but it doesn't help to visualize what that would look like.
To be honest this game is a bit of a mess. Normally you would pick a font size or line length, and find a fitting lineheight last. Here we are for example guessing line length based on a given line spacing. But, still useful to drive the point home there is some relation.
> Normally you would pick a font size or line length, and find a fitting lineheight last.
Agreed. In my experience building for the web, line length is usually the constraint that other dimensions are chosen around: the width of the device, a fixed-width column of content, or a specified width for a dialog or modal.
In this game, I was able to easily score perfect for line height and font size sliders, but it found it quite difficult to score anything above 0 for the line length slider.
i see some bias there about line-width being like in news-paper column/s - or a narrow blog-like middle column (so there is more space for ads?). Which.. just isn't so.
Problem for me as a developer in reading about these things, is that I often end up in arguments with designers who have not read about these things, and they refuse to consider such input.
Thats really bad, these few little things are, if anything, an absolute foundation of Typography - a designer should get knowledgeable with this quite early in their formation.
They aren't really foundational, they're just a set of styles that tend to look nice and are therefore taught in introductory classes. There aren't any actual rules for things like style/taste/fashion.
(a) The "equilateral" triangles on the intro page aren't.
(b) It goes downhill from there; the basic point being made is sound, but it's quite misleading to consider a single paragraph in isolation, rather than a full column of text. The right judgements for one are not the right choices for the other.
Adapting to his style or typography bias, you just need to make sure that you can fit a line (cap height) between two lines and you'll get a good result.
For my taste the line height is too low, rather than cap height I'd focus on the EM box as minimum (The space the type designer has given each character).
The standard scored against was mostly good, although his preferred column width was pretty arbitrary, and the best line-height can depend on the context of a piece of text and its use.
13 comments
[ 2.7 ms ] story [ 34.4 ms ] threadTo be honest this game is a bit of a mess. Normally you would pick a font size or line length, and find a fitting lineheight last. Here we are for example guessing line length based on a given line spacing. But, still useful to drive the point home there is some relation.
Agreed. In my experience building for the web, line length is usually the constraint that other dimensions are chosen around: the width of the device, a fixed-width column of content, or a specified width for a dialog or modal.
In this game, I was able to easily score perfect for line height and font size sliders, but it found it quite difficult to score anything above 0 for the line length slider.
I like huge line heights and short line widths.
In my browser I even force p{max-width: 60ch;} on all sites
For my taste the line height is too low, rather than cap height I'd focus on the EM box as minimum (The space the type designer has given each character).