[HN Gopher] The Elements of Typographic Style Applied to the Web
___________________________________________________________________
The Elements of Typographic Style Applied to the Web
Author : omarfarooq
Score : 62 points
Date : 2021-09-03 09:40 UTC (1 days ago)
(HTM) web link (webtypography.net)
(TXT) w3m dump (webtypography.net)
| PaulHoule wrote:
| I do a lot of work with print lately and manual kerning has been
| a revelation to me.
|
| I use to go through hundreds of typefaces like going through
| hundreds of photos on Tinder and think 'they all suck' but then I
| started adjusting the letter spacing and now I 'love the one I'm
| with'.
|
| I recently developed an unofficial corporate identity for my
| workplace (improving signage) that uses serif fonts. All the
| other signs use sans-serif which is half because it fits the
| modernist building and half because people don't know how to do
| the manual kerning it takes to make serif fonts pop.
|
| That said I have felt no need to kern for the web and have no
| desire since it will certainly go bad if the user isn't seeing
| the typeface I want them to see.
| wffurr wrote:
| I didn't get very far in this because the body type is set too
| small to read on a smartphone screen.
| jkepler wrote:
| On my smartphone, a simple doubletap on the body text and it
| zooms in to the text, full-width on the screen, and is thus
| readable and beautifully typeset.
| Y-bar wrote:
| This.
|
| And _nothing_ looks tappable/clickable either. A prime example
| why the web is an interactive medium, different from print.
| [deleted]
| smlacy wrote:
| Couldn't figure out how to navigate past the title page on my
| phone, so I gave up.
| cblconfederate wrote:
| What does typography have to do with the web? There seems to be
| nothing here of value that is based on evidence about the
| readability of text. Especially in today's era where the medium
| is not fixed, it makes zero sense to treat the web as a PDF.
| arglebarglegar wrote:
| if you read any of this you'd realize that's not what's being
| suggested... it's about making informed decisions about how you
| style text with css
|
| typography is generally involved with any text, many of these
| are standards that have existed for hundreds of years and still
| exist on computers
| sonofhans wrote:
| Typography has everything to do with the web. Web design is 90%
| typography (cite below). Typography is not about perfectly or
| reverently setting text in immutable ways (viz your "PDF"
| comment). Typography is about encouraging and aiding
| readability, and allowing a piece of writing to have a
| subtextual voice. See, for example, the posts about Arctic
| Adventure (https://www.arctic81.com/). The typography on that
| site is harder to read than I'd like, but does absolutely put
| you in the time and place that the author wants.
|
| Jeffrey Zeldman said (in 2015):
|
| "Mobile is today's first screen. So design responsively,
| focusing on content and structure first. Websites and apps
| alike should remove distractions and let people interact as
| directly as possible with content. 90 percent of design is
| typography. And the other 90 percent is whitespace."
|
| (Zeldman knows his shit. He was one of the most influential
| designers and standards-setters for the early web, e.g.,
| founder of the Web Standards Project, which was instrumental in
| helping us escape the minefield of browser-specific
| customizations in the late 90s).
|
| Most of the principles of good typography apply anywhere that
| type can be used, from books to billboards to websites to
| mobile games. Typography as a discipline is thousands of years
| old, and based in the fundamentals of human perception. We know
| how humans read. Typography is the practically application of
| that knowledge.
|
| There was a brief period where coolness and aesthetic appeal on
| the web trumped good typography principles (e.g., again, the
| Arctic Adventure site). Most of that has settled down, though,
| and most sites have reverted to simple and common standards.
| SavantIdiot wrote:
| I think it that the entire web (excluding videos) is nothing
| but typography. Typography is not just about fancy flourishes
| and font serifs, it is about readability and how information is
| organized and presented visually. Granted, it does have a
| stylistic element (which is like adding chance to a board
| game), in that nothing is "perfect" because of culture and
| trends, but there are rules developed over the past four
| centuries that help make the medium more accessible.
| [deleted]
| indymike wrote:
| Choice of colors makes it very difficult to read, even on a 4k
| display.
| SavantIdiot wrote:
| Really? I don't like the subtle skeuomorph of trying to make it
| look like a book, but the colors seem benign. What problem are
| you seeing?
| hyperstar wrote:
| Are there any web sites that have beautiful typography?
| xattt wrote:
| I cringe a bit when I hear "beautiful typography". Usually,
| this means style over substance. It is way easier to shave yaks
| about the way something looks (and feel productive doing it),
| than it is being concerned over the last 10% that takes content
| from good enough to great.
| theshadowknows wrote:
| I cringe whenever people describe their app as "beautiful."
| For the same reason.
| wffurr wrote:
| https://practicaltypography.com/ is pretty great.
| mrob wrote:
| https://bestmotherfucking.website/
| qart wrote:
| Without a doubt. Fast, clean, adaptable. What's not to like?
| Semaphor wrote:
| #fff on #000. I find the site pretty exhausting to read.
| Like most "motherfucking websites", a bad example for a
| good site.
| wizzwizz4 wrote:
| Your monitor / browser is misconfigured.
|
| On some machines, maximum contrast is exhausting; on
| others, reduced contrast is near-invisible. The
| "exhausting" machines can be configured to reduce
| contrast, but the "invisible" machines cannot trivially
| be configured to increase contrast.
| deltron3030 wrote:
| The Marvin Visions site is cool:
| https://www.readvisions.com/marvin
| renarl wrote:
| Are there any markdown themes that follow these guidelines?
| uxcolumbo wrote:
| The web is not print and that site looks unusable to me (it might
| be old).
|
| It kinda looks broken on a big screen and it took me a while to
| figure out what to do next. Call to actions were not clear.
|
| Keep things simple, the web is fluid and make sure your text is
| legible and ensure good contrast. Also think about load
| performance and ideally stick to fonts that are generally already
| installed on devices by default.
|
| Or follow this handy guide:
|
| https://betterwebtype.com/articles/2021/06/07/all-you-need-i...
|
| https://betterwebtype.com/ (free web typography course)
| lazyjeff wrote:
| I teach user interface design, with a bit about typography but
| I'm not a typographer myself. But I feel like a lot of the advice
| there is taken from graphic design (based on the original EoTS
| book), and not that practical for web designers where text is
| slightly more fluid.
|
| Namely, much of the book is about making choices that depend on
| the exact placement of individual characters on the screen. Like
| the entire section about hyphenation. This doesn't make sense if
| the glyphs show up slightly different on different screens. Like
| Mac/PC/Android might render the same glyph for a font just a
| pixel different (maybe even just due to the way it rounds a
| number), bumping a glyph on to the next line. It's really hard to
| control the exact placement of each glyph, and not worth fretting
| about for the web. So I think the principles in the book that are
| focused on exact placement of individual glyphs (characters) is
| incompatible with the more general principles of responsive
| layouts or using a native font stack.
|
| Some of the advice is automatically taken care of by defaults on
| the browser/OS, like kerning or letterspacing are often not that
| relevant to the web designer. It might be relevant to the people
| working on rendering at the browser level. And the other advice
| is stylistic and depends on the content (like indentation and
| casing).
|
| I think the most practical advice from this book is fairly
| straightforward: choose some appropriate sizings for various
| headers and body text, check that you have about 70 characters
| per line, and choose a comfortable line-height for the body text.
| gozzoo wrote:
| Can you recomend some good books or online courses teaching UI
| and graphical design?
| renarl wrote:
| Refactoring UI book has been helpful to me as a dev who wants
| to get something decent looking on the screen.
|
| https://www.refactoringui.com/book
| tl wrote:
| I like Adam Withan's free components (Tailwind), but his
| paid content is problematic. From the your link the left
| example is both clearer and more compact then the right
| version that is a supposed "improvement".
| SavantIdiot wrote:
| "HTML and CSS 2 do not have any provision for automatic
| hyphenation and current Web browsers support, even for manual
| hyphenation, is poor.
|
| So don't justify text on the web."
|
| I've been waiting for this to be fixed since 1997. I suspect it
| is a very difficult problem to get right. My Kindle accidentally
| hyphenates things like "Walde-r" and "Lannister-s" (yes, I'm
| reading GoT again).
| kuished wrote:
| I think it's already possible to get some of the way there on
| the web today (having fine-grained control and avoiding
| Walde-r's). Check out Hypher
| (https://github.com/bramstein/hypher). If you're using Gatsby
| and Markdown, I wrote a small plugin to be able to use it
| there:
|
| https://www.gatsbyjs.com/plugins/gatsby-remark-hypher/
|
| and
|
| https://github.com/siawyoung/remark-hypher
|
| (An example of how it looks like: https://siawyoung.com)
| john-doe wrote:
| Incidentally, by the same author, the state of hyphenation on
| the web: http://clagnut.com/blog/2395
|
| It's from 2019, but nothing much has changed since. My biggest
| gripe is that browsers should prevent hyphenation when a word
| starts with an uppercase letter, which doesn't seem too hard?
|
| The only bulletproof (but more complicated) solution is to
| process text beforehand and insert soft hyphens (­) where
| appropriate.
| red_trumpet wrote:
| There is the `hyphens` CSS property [1]. Apparently, all big
| browsers implement it at least for english. It's a pity though,
| that this is not possible for other languages (at least for
| Chrome). It should be as simple as provide a basic dictionary
| with hyphenation data...
|
| [1] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
| Semaphor wrote:
| Cool, it seems that Firefox and Safari support quite some
| languages on both Desktop and Mobile, but Chrome is English
| only :/
| KaiserPro wrote:
| I am surprised that they chose a font that's designed by used on
| cheap shitty paper. The whole point of the web is that you didnt
| need to use a font thats designed to overcome crap ink and crap
| paper.
___________________________________________________________________
(page generated 2021-09-04 23:00 UTC)