Learn the logic of great typography
learnui.design
learnui.design
The author asked me chosing something legible, I can test that and find the best one asking several users what font was more legible, but if the author tells me that I am wrong because I will want something with "more personality" it ruins the science of fonts.
To be honest this is just a design taste tutorial.
Still a subjective judgment call, but at least there’s _some_ framework behind it.
- I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-vertical-rhythm), which turns a lot of imprecise choice to exactly correct sizes.
- I've never heard of there being a rule for how much space goes above a paragraph (this is a funny thing about web typography, since in print you indent the paragraph so there's no additional space). But I guess I'd consider it correct from a vertical rhythm standpoint to either use the line height or half of it.
- Regarding vertical space between lines, what I've heard is you want to make the spacing between lines visually appear greater than the space between words. As far as I know this is just done by eye. (I.e., so the rule is to choose a leading that makes your space between lines appear larger than the space between words.)
- I think there are exact header sizes that are better than picking an arbitrary font size that seems to look big enough. The trick I use here is to take the [traditional point scale](https://markboulton.co.uk/journal/five-simple-steps-to-bette...) and convert it to a ratio relative to 12 point. This is a way to bake historically refined font ratios into your design.
- Personally, when choosing margins I'd use a [grid system](https://practicaltypography.com/grids.html), which will give you an exact gutter size. But admittedly this isn't too important for a single column of text.
- There's simple rules that are missing here like make sure your width allows for 7-12 words per line, which [research](https://baymard.com/blog/line-length-readability) has illustrated improved readability.
- Another good missing rule is never use any two font treatments on the same page that are too similar to each other. This usually means having two things different between two font treatments, e.g., a different font size and weight for say a subheading vs. a heading.
I've no problem using it as a decent rule of thumb, but what's the evidence this is the one correct way to do things?
1. Print design has honed in on this approach with remarkably consistency. I did a study of various publications (e.g., magazines and books) when I was first learning about vertical rhythm and found that practically every publication I looked at implements vertical rhythm. But this is also a bit of red herring, because in print publications, you almost always have multiple columns, and multiple columns have additional issues when vertical rhythm isn't implemented because it means body and headline copy won't be along the same baseline (an issue that isn't present in a single column text for example). But I still find it remarkable how consistently the rules are implemented in print design, given how little people talk about it in web design.
2. For me personally, before I learned about vertical rhythm (which I learned along with grids, and typographic proportion), I found everything I designed always felt sloppy in some undefinable way. Now that I use these strategies I no longer see that sloppiness in my designs. Purely subjective, but what I'm trying to say is that to me these systems solved a problem in my designs that I wasn't able to solve just "by eye".
Neither of those are objective of course, but those are just the ways I personally have been convinced they're "the right way".
I took a quick glance at my bookshelf and it seems to be the case that this is sometimes true but most of the books I looked at don't indent and do add some additional line spacing between paragraphs.
For one, I would make it possible to go forward with the "wrong" (according to the author) choice, and of course backwards to make changes. By only steering the user towards the author's ideal, you have no way to experiment.
But a lot of this is just too subjective. The advice about spacing and so on seems to be based on "just so" feelings about what looks right, not any actual evidence. I'd like to see something that's grounded in research about legibility, readability, and mathematically ideal proportions.
Using a clichéd "sci-fi font" for a sci-fi book feels like an old trope that needs to die already. I get the point, but the author leaves no room for error here.
Unless you go out of your way to fuck it up most text you put on the web will be legible. And no matter what someone will say it's illegible to them and just raw unstyled html defaults are the most legible. Or the raw html defaults are unreadable and anything else is an improvement. etc etc.
It's got technical foundations so it's easy to pretend otherwise but it's still aesthetic choices. Math won't really help you here. In fact building fonts off of "mathematically ideal proportions" was a popular thing for a while and is now mostly considered a regrettable dead-end. The things that came out of it don't look better and aren't overall more readable.
It doesn't explain the "why" of anything, except in broad strokes (a big fat heading is more punchy and so on), it only prescribes a specific, extremely narrow set of choices.
Methods are based on principles. If nothing rigorous underpins the choices we make in design, how can it be taught?
Ideally, something that matches my meal. Slob heuristics!
To be honest, I kind of like the plain Times New Roman example, the only thing it needs is reduction of the width of the paragraph. Ideally should be around 50-70 characters and this is not subjective. It is pretty much the reason for the dimensions of a book and how NYT is typeset; everything in between. Easy to prove it to yourself by runnning a small experiment, too.
EB Garamond
> EB Garamond has a very classic, formal appearance. We want something that has a modern edge.
No.
Those non-features are also a hallmark of a site that hasn't been updated in 25 years -- or at any rate, a site whose tech stack hasn't been. The average quality of web content was probably higher in the 90s, if 'quality' means density of accurate information.
Spivak's calculus hasn't been updated either since way longer than that, and it's as fresh today as it was in 1967. What is your point exactly?
Still, what you say does not ring true to me. I was thinking about stuff like bellard.org , tygert.com or math.ucr.edu/home/baez/ ... All these sites are html-only, get updated regularly, and each update is a much larger achievement than the entire life work of an average person.
Of course, therin lies the split between engineers and designers. :) Each to their own, ultimately, and there's different places for both.
TFA is a self-described "tutorial" that doesn't actually teach you how to make similar decisions in a different context. Having gone through this, I am no better equipped to select typefaces and configure spacing on my next side project than I was before I started. It's a complete and utter waste of time.
There's no "why", only some vague and useless "we can do better"-type hints without explaining why 26-px line height is better than 27.
Not the person I want to learn ui from
> The angular, geometric Abolition works great
Not for me. It's hard to read, and unusual. I think articles that have just one font for everything, text, title, subtitles, etc. are much easier to parse.
Sci-Fi doesn't need to be all slab-serif and uppercase, but I think the author's suggestion captures the usual clichés about the genre pretty well. It's a decent introduction for typesetting a typical Sci-Fi book. Web pages, not so much.
It has to be legible, but it also has to signal what readers are going to get.
No one is going to set a science fiction novel in this. It would be too weird.
https://commons.wikimedia.org/wiki/File:Old_English_typeface...
Similarly using different fonts for title, subhead, and body gives readers a preview of the content.
Abolition is good for the title.
Personally I didn't agree with the subhead choice because I thought it was too on-the-nose and cliched.
But it's a fine line, and originality always has to be balanced with expectation.
Well... that confirms my point: it's arbitrary, a matter of opinion, and therefore, everyone is going to have a different preference.
Well, Carl Amery's "Der Untergang der Stadt Passau" at least includes passages styled after medeavial chronicles, that are set in Fraktur.
As a university teacher of mine once said: Write down a set of rules for a genre and you get a manual on how to violate it.
Conversely, if you don't have an eye for beauty, learning this won't give you one.
I’m sure my preferred style of Comic Sans for text and Impact for headings will stick around, too.
I'm sure many on here despise marketing (and seemingly design too), but I think Erik is a prime example of how to do effective marketing ethically.
I'd pay $$ (but not $$$) for a good course of lessons like this. But it seems like what's being sold are video lessons, not available yet.
Ideally, though, what I've wanted for a long time are heuristics like this embodied in /code/. I have ideas for how to do that, but no time.
When I look, there is no option to enroll. It just says "Want to be notified when Learn UI Design opens for enrollment?" with links to sign up. I have no idea about pricing either. I don't want to give out my email without knowing what I'm asking about buying.
Reading the first page. There is nothing better about the fonts on the right side of the page in my opinion. the only thing awful about the left column is the lack of actual organization and proper separation when it comes to text content. The font isn't the issue, Times and Arial are absolutely fine.
This would be better postured if the logic part was removed from the title.
These are things the design community learned mostly through trial and error. There’s not a lot of science behind it, and the little there is is not often used.
But still a lot to learn here, and the format is fun.
[1]: https://learnui.design/tools/img/typography-tutorial/tmatag-...
But the answer to better typography as I see it is just a lot more exposure (enormous amounts) to typography in context of websites, curating this gigantic collection down to the most inspiring/impressive, and then remixing to one's taste. E.g. check sites like fontsinuse.com for ideas.
The tutorial does a great job at explaining some very basic thoughts around communication design but fails at demonstrating what great typography can do.
The page's creator should be giving reasons why his "great" example defies a basic typographical convention. This webpage seems to be all headline.