[HN Gopher] Learn the logic of great typography
___________________________________________________________________
Learn the logic of great typography
Author : marban
Score : 173 points
Date : 2022-05-27 12:11 UTC (2 days ago)
(HTM) web link (learnui.design)
(TXT) w3m dump (learnui.design)
| youssefabdelm wrote:
| 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 wrote:
| 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.
| svat wrote:
| 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.
| bccdee wrote:
| 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.
| social_quotient wrote:
| 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.
| kradeelav wrote:
| 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.
| jmbwell wrote:
| Logical principles of design do exist. I don't see many here.
| vraghu wrote:
| 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.
| meerita wrote:
| 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 wrote:
| 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 wrote:
| A good resource for typgraphy, https://webtypography.net/toc/ I
| don't think there's anything so well done like this.
| amazing_stories wrote:
| Yeah, this is a garbage site on typography. It's mostly just
| one person's personal taste.
| dinkleberg wrote:
| 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 wrote:
| 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 wrote:
| FWIW I've taken both of his courses (the UI & UX one) and
| they were both top notch. Well worth the cost.
| blagie wrote:
| 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 wrote:
| 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.
| jamesfisher wrote:
| 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-...
| atombender wrote:
| 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 cliched "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.
| systemvoltage wrote:
| 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.
| youngtaff wrote:
| There's also too much reliance of pixel measurements, line
| length should probably be set in ch for example
| HellDunkel wrote:
| Design is an art and a craft much more than a science. Agree
| with your point about the scifi cliche.
| giraffe_lady wrote:
| 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 wrote:
| 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?
| [deleted]
| drewcoo wrote:
| > what color you should wear to dinner
|
| Ideally, something that matches my meal. Slob heuristics!
| [deleted]
| alanbernstein wrote:
| Are typography nerds the web equivalent of audiophiles?
| throw_m239339 wrote:
| 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.
| enriquto wrote:
| 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 wrote:
| 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.
| twangist wrote:
| > 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 wrote:
| > 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.
| andybak wrote:
| 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 wrote:
| Paragraph spacing in the default browser style is alright.
| The example on this website is doctored to look uglier than
| it actually is.
| chrisweekly wrote:
| 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.
| bambax wrote:
| 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.
| TheOtherHobbes wrote:
| 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.
| Archelaos wrote:
| > 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.
| bambax wrote:
| > _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.
| kijin wrote:
| 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 cliches about
| the genre pretty well. It's a decent introduction for
| typesetting a typical Sci-Fi book. Web pages, not so much.
| giraffe_lady wrote:
| 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 wrote:
| > 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.
| carlgreene wrote:
| 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.
| gentleman11 wrote:
| 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
| eikeegi wrote:
| This site does not teach you anything about "great typography",
| but rather presents someones personal preferences as such.
| gralx wrote:
| 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 wrote:
| 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.
| seanwilson wrote:
| > 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?
| robenkleene wrote:
| 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.
| robenkleene wrote:
| 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".
| bccdee wrote:
| 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.
| twangist wrote:
| 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.
| ghaff wrote:
| >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.
| HelloNurse wrote:
| 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.
| spinaltap wrote:
| 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 wrote:
| 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.
| jacobsievers wrote:
| 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.
| akho wrote:
| 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.
| turnsout wrote:
| So true, and yet we continue to produce documents for people
| who are alive in the 21st century
___________________________________________________________________
(page generated 2022-05-29 23:01 UTC)