Learn the logic of great typography(learnui.design)
learnui.design
Learn the logic of great typography
https://learnui.design/tools/typography-tutorial.html
69 comments
In fact, a tutorial in the author's design taste. I bailed after the first step, on reading "we can do better" for my font choice. It seemed at least as good and appropriate as the author's, whose justification amounted to "I say this is better" (it isn't!)
I've completed the entire process to see the end result and I disliked it so much. In the end it's just a breadcrumb to particular style, which imho, doesn't kill anything. It's plain average result.
Yeah, this is a garbage site on typography. It's mostly just one person's personal taste.
A good resource for typgraphy, https://webtypography.net/toc/ I don't think there's anything so well done like this.
Oh and what if I like Inter because it has such a neutral and clean character?
Fun! But a heavy emphasis on doing things by eye. Personally I prefer the results of following stricter rules extracted from print typesetting. A few examples:
- 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 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.
But "stricter rules", apart from not being absolute enough to be strict, depend on fonts (including mostly invisible metrics like ascenders and descenders vs. line height) and on what kind of text is being spaced. For example, the visually important vertical rhythm of ink and gaps is dictated by line spacing, but in relationship with x-height (for mostly lowercase text), or capital height (for uppercase text) or something in between, and between lines in adjacent fonts depends on where the respective baselines are located.
> 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 no problem using it as a decent rule of thumb, but what's the evidence this is the one correct way to do things?
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?
Great question, here's the way I look at it:
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".
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".
Quick follow-up here: The recommendation I have to someone curious to learn if they think vertical rhythm is "the right way" is to take a look at a paper copy of well-typeset publication (e.g., maybe Wired or The Economist) and then compare how you feel looking at that article vs. looking at an example of web typography (like something on Medium). I find web typography looks clearly sloppy to me in comparison.
I find vertical rhythm to be kind of arbitrary. It's handy if you want a starting point, but sometimes a 1.8-line vertical space just looks better than a 2-line one. There are no "correct" choices, only choices that look better or worse, and even that's subjective. Simple ratios make for easy design, and often decent design, but not necessarily the best design.
If you don't have an eye you shouldn't be doing this stuff except under duress. Asking for rules is asking for an algorithm that would let you "design" (ok, lay-out) mindlessly and sightlessly. Mostly, people don't want to behold those results, and editors don't want to reformat every document. Of course there are guidelines, best practices, a history of what's known to work/look cool and of what's known to not work/suck/look crummy.
>since in print you indent the paragraph so there's no additional space
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.
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.
I think this could be improved in a few ways.
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.
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.
It's like asking for "actual evidence" about what color you should wear to dinner. It depends on the context and setting, and current social attitudes and your positioning relative to them, and your own sense of what looks good based on those elements.
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.
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.
That seems like a bad analogy, given that this web site is explicitly aims to teach a method.
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?
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?
[deleted]
> what color you should wear to dinner
Ideally, something that matches my meal. Slob heuristics!
Ideally, something that matches my meal. Slob heuristics!
There’s also too much reliance of pixel measurements, line length should probably be set in ch for example
It is also just following the current trends. The biggest problem in design is subjectivity masquerading as objectivity.
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.
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.
Design is an art and a craft much more than a science.
Agree with your point about the scifi cliche.
> Which of these body fonts feels most appropriate for a sci-fi book set in 2975?
EB Garamond
> EB Garamond has a very classic, formal appearance. We want something that has a modern edge.
No.
EB Garamond
> EB Garamond has a very classic, formal appearance. We want something that has a modern edge.
No.
I sort of find the "unstyled" html the best. All other examples seem slightly worse. But then, I may have a strong bias for this style in web-based text. Coming from an academic background, hand-written sites with no css nor js are a strong marker of ultra-high quality content. For science fiction, then, it seems a very natural choice; even more so for Egan.
In terms of maximizing legibility, limiting the line length and increasing line height/spacing/leading is something so easy and so valuable. The rest feels stylistic (and that totally has its place) and not ESSENTIAL to legibility.
> Coming from an academic background, hand-written sites with no css nor js are a strong marker of ultra-high quality content.
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.
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.
> Those non-features are also a hallmark of a site that hasn't been updated in 25 years
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.
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.
So more line spacing and paragraph spacing are not improvements to your eye? Paragraph spacing in particular seems to me an uncontroversial improvement over the default.
Paragraph spacing in the default browser style is alright. The example on this website is doctored to look uglier than it actually is.
I'm surprised at the negativity here. The framing/headline could be a bit better (it's less logic and rather a taste of the "art" of punchy, emotive typography, the softer intuition side of things) - but as a working corporate design manager, his rationale checks out for basic projects that working designers are presented with.
Of course, therin lies the split between engineers and designers. :) Each to their own, ultimately, and there's different places for both.
Of course, therin lies the split between engineers and designers. :) Each to their own, ultimately, and there's different places for both.
Why are you surprised?
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.
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.
Notably, the author has a “learn ui design” course whose signup page is about 10 miles long and I couldn’t find a price on it after scrolling.
Not the person I want to learn ui from
Not the person I want to learn ui from
Not completely convincing IMHO... Good advice about size, line length, line height, paragraph spacing. But the recommendations for font choice feel completely arbitrary.
> 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.
> 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.
It is arbitrary but that doesn't make it meaningless. "Just use one font" is the "just eat only soylent" of typography. It ignores or dismisses the fact that arbitrary aesthetic factors do affect us and how we approach or receive a text.
Abolition looked totally wrong at first, but the next step increases the size of the title and makes it look more balanced with the rest of the page.
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.
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.
The font is there to set a mood and context.
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.
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.
> No one is going to set a science fiction novel in this. It would be too weird.
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.
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.
> Abolition is good for the title. / Personally I didn't agree with the subhead choice
Well... that confirms my point: it's arbitrary, a matter of opinion, and therefore, everyone is going to have a different preference.
Well... that confirms my point: it's arbitrary, a matter of opinion, and therefore, everyone is going to have a different preference.
It's a great tutorial, turning into great result in the end. However, if you have good taste, you can already do things right without having to learn any theories, because bad typography looks bad to you, and you'll keep tweaking until it looks good.
Conversely, if you don't have an eye for beauty, learning this won't give you one.
Conversely, if you don't have an eye for beauty, learning this won't give you one.
I strongly disagree. Style is a skill and can be learned like any other. Sure you might never match someone who is just naturally gifted, but anyone can achieve competence.
Wishlist: an interactive tool like this that lets you work with your own arbitrary unstyled-HTML webpage, allowing you tweak the important things one by one until you were satisfied, then save the CSS.
Probably not exactly the tool you are looking for but something like figma let’s you toe the line between design and code. You can get all of the css values when done.
You can come close if you use browser devtools. IMO that's the easiest way to fiddle with (e.g.) line spacing until you're happy with it.
Not buying any of it. If we judge by previous longevity, my guess is that Garamond will be the only one of those fonts still in use in the 30th century.
ITC, Monotype, Linotype, Adobe, or Berthold? Or some other French Renaissance-inspired typeface?
I’m sure my preferred style of Comic Sans for text and Impact for headings will stick around, too.
I’m sure my preferred style of Comic Sans for text and Impact for headings will stick around, too.
So true, and yet we continue to produce documents for people who are alive in the 21st century
This is a great lead-gen tool. It illustrates a problem and how with a little work you can overcome it in a very visual way. Then it immediately follows up with a call to action to join the email list where he'll send you actionable design tips. Then eventually after you've derived plenty of value from his emails, you'll get info about his paid courses.
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'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 liked it. The problem is this was released before the sale is available.
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.
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.
FWIW I've taken both of his courses (the UI & UX one) and they were both top notch. Well worth the cost.
How?
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.
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.
He only opens up enrollment every few months (I believe) so that you start with a cohort. You get access to a slack channel where you can chat with all the folks going through it at the same time.
I liked the interactive style of the tutorial but maybe we can change up what's right and wrong and let the user pick what feels right to them and compare before and after.
I'd like a course that sticks with "websafe" fonts, and not introduce some exotic ones in order to make a page look good.
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.
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 didn't feel like I learned anything of objective worth. Some of the design decisions by the author I disagreed with, but there wasn't any concrete feedback on why my choice was "wrong". Instead I was just told "this font is too fun for our topic" or something arbitrary like that.
This would be better postured if the logic part was removed from the title.
This would be better postured if the logic part was removed from the title.
Very little to do with logic, it’s all very subjective, really more about taste and best practices about what looks right and works well.
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.
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.
What is that slightly blackletter font being used for the title? [1] I like it, but it seems to not be used in the interactive example.
[1]: https://learnui.design/tools/img/typography-tutorial/tmatag-...
[1]: https://learnui.design/tools/img/typography-tutorial/tmatag-...
It is Grenze Bold (700), an open-source typeface (also available via Google Fonts).
https://github.com/Omnibus-Type/Grenze
https://github.com/Omnibus-Type/Grenze
Thanks! :)
See also https://every-layout.dev for a phenomenal demonstration of basing your CSS architecture on first principles, starting with a typographic scale. I've been doing webdev since 1998 and I'm still floored by its power and elegance.
Are typography nerds the web equivalent of audiophiles?
Feels very strange to say that the author's subjective taste is 'right' in some sense. I get it... he's a designer with experience, but his experience has only allowed him to move closer to his own taste. Unless you believe in aesthetic absolutism...
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.
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.
I absolutly agree.
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 tutorial does a great job at explaining some very basic thoughts around communication design but fails at demonstrating what great typography can do.
[deleted]
Logical principles of design do exist. I don’t see many here.
This site does not teach you anything about "great typography", but rather presents someones personal preferences as such.
I agree, and I'll go further. Jan Tschischold didn't think we should use serifs unless text is justified. That convention was one of Wikipedia's main reasons for settling on sans-serif for body text.
The page's creator should be giving reasons why his "great" example defies a basic typographical convention. This webpage seems to be all headline.
The page's creator should be giving reasons why his "great" example defies a basic typographical convention. This webpage seems to be all headline.
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.