The Elements of Typographic Style Applied to the Web(webtypography.net)
webtypography.net
The Elements of Typographic Style Applied to the Web
http://webtypography.net/
43 comments
Can you recomend some good books or online courses teaching UI and graphical design?
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
https://www.refactoringui.com/book
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".
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)
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)
"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).
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).
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
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens
Cool, it seems that Firefox and Safari support quite some languages on both Desktop and Mobile, but Chrome is English only :/
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)
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)
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.
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.
Are there any web sites that have beautiful typography?
The Marvin Visions site is cool: https://www.readvisions.com/marvin
Without a doubt. Fast, clean, adaptable. What's not to like?
#fff on #000. I find the site pretty exhausting to read. Like most "motherfucking websites", a bad example for a good site.
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.
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.
That's your opinion. I personally think high contrast colour schemes are great, and use them whenever possible. I even bought a laptop with an OLED screen (XPS 13 9310) to further maximize contrast. I hate it when websites specify light grey text on a dark grey background; I find it so hard to read.
To give you an example of the sort of high contrast user interfaces I like, turn on he dark High Contrast theme in VS Code.
To give you an example of the sort of high contrast user interfaces I like, turn on he dark High Contrast theme in VS Code.
> To give you an example of the sort of high contrast user interfaces I like, turn on he dark High Contrast theme in VS Code.
No idea what they do different, but while I don’t prefer it, it looks a lot less problematic than the website. There is no glare effect where the letters bleed into the black.
No idea what they do different, but while I don’t prefer it, it looks a lot less problematic than the website. There is no glare effect where the letters bleed into the black.
https://practicaltypography.com/ is pretty great.
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.
I cringe whenever people describe their app as “beautiful.” For the same reason.
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.
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.
The ability to use custom typefaces has been available on the web for over a decade with the @font-face rule. You don’t need to rely on system fonts or fallbacks. The main concerns are the hinting differences between platforms, aliasing and hi vs low resolution screens.
I thought a general rule was to use sans-serif fonts on electronic devices and serif fonts in print, because they are repsectively easier on the eye?
This site - and other similar "web typography" sites - seems to immediately fall foul of that by using serif fonts. In my opinion this makes them less comfortable to read.
This site - and other similar "web typography" sites - seems to immediately fall foul of that by using serif fonts. In my opinion this makes them less comfortable to read.
The common wisdom was that serif fonts are difficult to faithfully reproduce on the relatively low resolution screens that computers have. But as devices have gotten better resolutions, this rationale doesn’t make as much sense anymore.
That fact doesn’t stop some people from repeating the old mantra.
That fact doesn’t stop some people from repeating the old mantra.
It's not just about reproduction, but composition, as well; the referenced site uses far too many words per line, at too small a font, to be reasonable legible (it's actually a perfect object lesson of what NOT to do).
Sans serif font faces, on the other hand, manage to be readable at smaller sizes, and even more so on modern anti-aliased displays, where they support a greater number of words per line.
Lest it seem that I am biased, serif fonts continue to be the best option for so-called "display" purposes (i.e., short line length such as headlines), as well as for subtractive, engravure-based applications such as stone, metal or wood; in these applications, sans serif fonts fail to provide a reasonable sight line.
Sans serif font faces, on the other hand, manage to be readable at smaller sizes, and even more so on modern anti-aliased displays, where they support a greater number of words per line.
Lest it seem that I am biased, serif fonts continue to be the best option for so-called "display" purposes (i.e., short line length such as headlines), as well as for subtractive, engravure-based applications such as stone, metal or wood; in these applications, sans serif fonts fail to provide a reasonable sight line.
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.
The advice on typography may have been good, but it was an even better example on how NOT to implement web navigation.
Is there a good resource about Arabic typography for non-Arabic-speaking designers and developers?
Choice of colors makes it very difficult to read, even on a 4k display.
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?
Bright white on red is blury on both a 4k display and on a 1080p display.
Are there any markdown themes that follow these guidelines?
[deleted]
I didn't get very far in this because the body type is set too small to read on a smartphone screen.
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.
Couldn't figure out how to navigate past the title page on my phone, so I gave up.
This.
And _nothing_ looks tappable/clickable either. A prime example why the web is an interactive medium, different from print.
And _nothing_ looks tappable/clickable either. A prime example why the web is an interactive medium, different from print.
[deleted]
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.
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.
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.
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.
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
typography is generally involved with any text, many of these are standards that have existed for hundreds of years and still exist on computers
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.