6 ms·

Learn the logic of great typography

197 points by marban 4y ago

bambax 4y ago
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.
- kijin 4y ago
  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.
- TheOtherHobbes 4y ago
  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.svg 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.
  - bambax 4y ago
    > 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.
  - Archelaos 4y ago
    > 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.
- giraffe_lady 4y ago
  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.
quink 4y ago
> 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.
jacobsievers 4y ago
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.
- turnsout 4y ago
  So true, and yet we continue to produce documents for people who are alive in the 21st century
- akho 4y ago
  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.
vraghu 4y ago
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.
atombender 4y ago
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.
- HellDunkel 4y ago
  Design is an art and a craft much more than a science. Agree with your point about the scifi cliche.
- giraffe_lady 4y ago
  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.
  - atombender 4y ago
    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?
enriquto 4y ago
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.
- Nathanael_M 4y ago
  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.
- andybak 4y ago
  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.
  - enriquto 4y ago
    Paragraph spacing in the default browser style is alright. The example on this website is doctored to look uglier than it actually is.
- twangist 4y ago
  > 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.
  - enriquto 4y ago
    > 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.
eikeegi 4y ago
This site does not teach you anything about "great typography", but rather presents someones personal preferences as such.
- gralx 4y ago
  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.
robenkleene 4y ago
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 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-better-typography-part-4/ 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 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 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.
- seanwilson 4y ago
  > I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-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?
svat 4y ago
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.
- social_quotient 4y ago
  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.
- bccdee 4y ago
  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.
chrisweekly 4y ago
See also https://every-layout.dev 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.
gentleman11 4y ago
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
dinkleberg 4y ago
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.
- blagie 4y ago
  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.
  - dinkleberg 4y ago
    FWIW I've taken both of his courses (the UI & UX one) and they were both top notch. Well worth the cost.
    - blagie 4y ago
      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.
      - dinkleberg 4y ago
        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.
jmbwell 4y ago
Logical principles of design do exist. I don’t see many here.
throw_m239339 4y ago
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.
deleted 4y ago
[deleted]
spinaltap 4y ago
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.
- User23 4y ago
  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.
youssefabdelm 4y ago
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.
- HellDunkel 4y ago
  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.
meerita 4y ago
I started the process and on the first check, it told me this nonsense: "Inter is a fantastic, legible font, but it feels very neutral and clean. Instead, we want to find something with a bit more personality." 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.
- twangist 4y ago
  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!)
  - meerita 4y ago
    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.
- amazing_stories 4y ago
  Yeah, this is a garbage site on typography. It's mostly just one person's personal taste.
- meerita 4y ago
  A good resource for typgraphy, https://webtypography.net/toc/ https://webtypography.net/toc/ I don't think there's anything so well done like this.
- atoav 4y ago
  Oh and what if I like Inter because it has such a neutral and clean character?
  - 4y ago
jamesfisher 4y ago
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-good-lg.png https://learnui.design/tools/img/typography-tutorial/tmatag-...
- meue 4y ago
  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
  - jamesfisher 4y ago
    Thanks! :)
alanbernstein 4y ago
Are typography nerds the web equivalent of audiophiles?
carlgreene 4y ago
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.
kradeelav 4y ago
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.
- na85 4y ago
  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.
magnetowasright 4y ago
hjkl0 4y ago
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.

197 points by marban 4y ago

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.

kijin 4y ago
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.
TheOtherHobbes 4y ago
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.svg 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.
- bambax 4y ago
  > 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.
- Archelaos 4y ago
  > 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.
giraffe_lady 4y ago
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.

quink 4y ago

> 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.

jacobsievers 4y ago

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.

turnsout 4y ago
So true, and yet we continue to produce documents for people who are alive in the 21st century
akho 4y ago
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.

vraghu 4y ago

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.

atombender 4y ago

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.

HellDunkel 4y ago
Design is an art and a craft much more than a science. Agree with your point about the scifi cliche.
giraffe_lady 4y ago
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.
- atombender 4y ago
  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?

enriquto 4y ago

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.

Nathanael_M 4y ago
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.
andybak 4y ago
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.
- enriquto 4y ago
  Paragraph spacing in the default browser style is alright. The example on this website is doctored to look uglier than it actually is.
twangist 4y ago
> 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.
- enriquto 4y ago
  > 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.

eikeegi 4y ago

This site does not teach you anything about "great typography", but rather presents someones personal preferences as such.

gralx 4y ago
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.

robenkleene 4y ago

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 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-better-typography-part-4/ 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 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 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.

seanwilson 4y ago
> I recommend reading about [vertical rhythm](https://24ways.org/2006/compose-to-a-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?

svat 4y ago

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.

social_quotient 4y ago
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.
bccdee 4y ago
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.

chrisweekly 4y ago

See also https://every-layout.dev 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.

gentleman11 4y ago

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

dinkleberg 4y ago

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.

blagie 4y ago
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.
- dinkleberg 4y ago
  FWIW I've taken both of his courses (the UI & UX one) and they were both top notch. Well worth the cost.
  - blagie 4y ago
    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.
    - dinkleberg 4y ago
      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.

jmbwell 4y ago

Logical principles of design do exist. I don’t see many here.

throw_m239339 4y ago

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.

deleted 4y ago

[deleted]

spinaltap 4y ago

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.

User23 4y ago
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.

youssefabdelm 4y ago

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.

HellDunkel 4y ago
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.

meerita 4y ago

I started the process and on the first check, it told me this nonsense: "Inter is a fantastic, legible font, but it feels very neutral and clean. Instead, we want to find something with a bit more personality." 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.

twangist 4y ago
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!)
- meerita 4y ago
  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.
amazing_stories 4y ago
Yeah, this is a garbage site on typography. It's mostly just one person's personal taste.
meerita 4y ago
A good resource for typgraphy, https://webtypography.net/toc/ https://webtypography.net/toc/ I don't think there's anything so well done like this.
atoav 4y ago
Oh and what if I like Inter because it has such a neutral and clean character?
- 4y ago

jamesfisher 4y ago

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-good-lg.png https://learnui.design/tools/img/typography-tutorial/tmatag-...

meue 4y ago
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
- jamesfisher 4y ago
  Thanks! :)

alanbernstein 4y ago

Are typography nerds the web equivalent of audiophiles?

carlgreene 4y ago

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.

kradeelav 4y ago

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.

na85 4y ago
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.

magnetowasright 4y ago

hjkl0 4y ago

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.