It's all about typography
53 comments
> However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free).
No, it is not always a good idea. If you care about your user's privacy a single bit, you should self-host. Easily done thanks to https://google-webfonts-helper.herokuapp.com/fonts
No, it is not always a good idea. If you care about your user's privacy a single bit, you should self-host. Easily done thanks to https://google-webfonts-helper.herokuapp.com/fonts
Or use the fonts installed on their computer. Let me, as the client have some say in rendering things. In many cases, where absolute placement of words doesnt matter, font families are just fine.
Or let me, as the content provider decide how I'd like to display my content, that you're not paying for, thanks.
You're more than welcome to make your on effort stripping that out after the event, of course.
You're more than welcome to make your on effort stripping that out after the event, of course.
[deleted]
Using the bandwidth and batteries you didn't pay for.
haha, ok? That's a bit of an ambitious stretch towards a counterpoint, but I'll bite — You pay for the bandwidth you choose to consume (assuming you're on a metred connection), I pay for the bandwidth on the content I choose to deliver (assuming I run a server), but ultimately you choose what to consume — you have every right not to not even bother with my content and its gorgeous choice of font.
Heck, if I've done my job properly, you can nix all my styling and read my content as you wish, but that's your palava.
As for your battery - I'll plant a tree and say a small prayer for its sacrifice.
Heck, if I've done my job properly, you can nix all my styling and read my content as you wish, but that's your palava.
As for your battery - I'll plant a tree and say a small prayer for its sacrifice.
By default, unless you NEED web fonts, why not just be respectful and use system fonts. Using web fonts us unnecessary for the bulk of websites. Every system has a helvetica/arial and georgia/baskerville family. Build a strong font family, and use webfonts sparingly when spacing and consistency are actually important. Why bloat bandwidth and page speeds for little gain.
'Respectful' to what exactly?
And what if I want to use Garamond?
Your stance makes no sense beyond your own peculiar prejudice.
- ed
Again, if YOU don't like MY content the way YOU want it - then YOU make the effort to change it as to how YOU want.
Anything else is simply, well - disrespectful - as you choose to imply.
And what if I want to use Garamond?
Your stance makes no sense beyond your own peculiar prejudice.
- ed
Again, if YOU don't like MY content the way YOU want it - then YOU make the effort to change it as to how YOU want.
Anything else is simply, well - disrespectful - as you choose to imply.
Why cant you use system fonts by default, unless you need to use a web font? Youre making web fonts the first, go to choice, in call cases.
Evidently you have your own thoughts on this, so it's pointless me bantering away - but why can't and why shouldn't I make my choice my default?
If I set up the stylesheet to have an order of preference, with a fallback to default system fonts that mangle my considered layout, then you're perfectly free to do what you will - but again (and we're going around in circles here) - it's my content, I'd rather like to display it as I wish.
Look, I'll be honest - there are times and situations where I wish there were still properly text based browsers that could read web content (assuming it's been marked up well enough in the first place) and display it in green-glowing monospaced terminal text - but there aren't. The world's moved on - I'm sorry you don't like it.
If I set up the stylesheet to have an order of preference, with a fallback to default system fonts that mangle my considered layout, then you're perfectly free to do what you will - but again (and we're going around in circles here) - it's my content, I'd rather like to display it as I wish.
Look, I'll be honest - there are times and situations where I wish there were still properly text based browsers that could read web content (assuming it's been marked up well enough in the first place) and display it in green-glowing monospaced terminal text - but there aren't. The world's moved on - I'm sorry you don't like it.
As an aside, I spent a good 4 hours of my life the other week learning how to use FontForge to strip out all the extraneous glyphs from an Open Version of Garamond and saving into a WOFF format file for a website, resulting in a 64Kb file.
This because a) I'm not happy with Google tracking my users and b) I've been professionally making websites since the mid to late 90s and so started off in a world where an entire site came in at under <100kb, images included.
I'm not one to needlessly and unthinkingly throw up excess pageweight
This because a) I'm not happy with Google tracking my users and b) I've been professionally making websites since the mid to late 90s and so started off in a world where an entire site came in at under <100kb, images included.
I'm not one to needlessly and unthinkingly throw up excess pageweight
In addition to privacy, web fonts are often huge. In a project, we reduced our page size by a few megabytes by sticking just to one font with just three font weights. Most people will load several fonts with all weights enabled.
Also SEO scores are impacted by external requests and page speed.
The assumption behind your whole argument is wrong. Choosing a typeface is not typography.
See: http://ia.net/blog/the-web-is-all-about-typography-period
> However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free).
I would argue that the exact contrary is true. Using web fonts in your project is always a bad idea for performance and functionality reasons. Stop bloating the web. Use system fonts.
See: http://mrmrs.cc/writing/2016/03/17/webfonts/
Edit: fix URL, formatting
See: http://ia.net/blog/the-web-is-all-about-typography-period
> However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free).
I would argue that the exact contrary is true. Using web fonts in your project is always a bad idea for performance and functionality reasons. Stop bloating the web. Use system fonts.
See: http://mrmrs.cc/writing/2016/03/17/webfonts/
Edit: fix URL, formatting
Thank you mrzool, I accept the criticism. I think I will try to understand better the use of system fonts (:
Medium no longer uses a custom or proprietary font for body text. They used to use Freight Text, but now they use Bitstream Charter, which is free (in several variants):
https://practicaltypography.com/charter.html https://www.samiam.org/blog/2014-07-04.html https://ctan.org/pkg/xcharter?lang=en https://software.sil.org/charis/
Charter is an excellent and very legible font. I wish more people would use it, especially in the LaTeX world, where most people stick with the to-my-eyes nearly unreadable default Computer Modern.
A few critiques of your design:
You put linebreaks in unexpected and jarring places, breaking the flow of paragraphs. For example, in the paragraph under the heading "The Hero".
You use a narrow column for body text. This is often recommended by typography nerds, but it doesn't play nicely with elements that can't be hyphenated and split across multiple lines, such as <code> spans. See eg. the paragraph under the heading "Content font". I suggest using a wider text column to make the resulting line-breaks less jarring relative to their surroundings. You might also want to enable "hyphens: auto" in your CSS, or use a JS hyphenation library (make sure to load it asynchronously so people on slow connections can still read your content while it's loading!).
And finally, there's more to typography than choosing typefaces, as I hope the above makes clear.
https://practicaltypography.com/charter.html https://www.samiam.org/blog/2014-07-04.html https://ctan.org/pkg/xcharter?lang=en https://software.sil.org/charis/
Charter is an excellent and very legible font. I wish more people would use it, especially in the LaTeX world, where most people stick with the to-my-eyes nearly unreadable default Computer Modern.
A few critiques of your design:
You put linebreaks in unexpected and jarring places, breaking the flow of paragraphs. For example, in the paragraph under the heading "The Hero".
You use a narrow column for body text. This is often recommended by typography nerds, but it doesn't play nicely with elements that can't be hyphenated and split across multiple lines, such as <code> spans. See eg. the paragraph under the heading "Content font". I suggest using a wider text column to make the resulting line-breaks less jarring relative to their surroundings. You might also want to enable "hyphens: auto" in your CSS, or use a JS hyphenation library (make sure to load it asynchronously so people on slow connections can still read your content while it's loading!).
And finally, there's more to typography than choosing typefaces, as I hope the above makes clear.
Computer Modern is indeed a poor font from the stone age of digital typography. It's the Comic Sans of computer science.
However it effectively communicates "I'm a serious expert in this computer stuff and you won't understand this text anyway", which is why blockchain ICO fraudsters write their zero-content whitepapers in Word but change the font to Computer Modern.
However it effectively communicates "I'm a serious expert in this computer stuff and you won't understand this text anyway", which is why blockchain ICO fraudsters write their zero-content whitepapers in Word but change the font to Computer Modern.
Do you find Knuth’s books ugly and hard to read?
Computer Modern is bearable in print (although there are many better-designed options from commercial font designers if you want a good 18th century style Didone face).
The problem is that most documents set in Computer Modern are not read on paper but on screens, where its legibility is very poor due to the extreme contrast between stroke widths.
The problem is that most documents set in Computer Modern are not read on paper but on screens, where its legibility is very poor due to the extreme contrast between stroke widths.
The spindly nature of Computer Modern that you see on computer screens is because of a poor translation of Knuth's Computer Modern design (whose default parameters were tuned taking into account the amount by which ink spreads on the page, on the printing devices Knuth was targeting) into outline fonts (which do not take into account the fact that there's no ink spread on the screen). See for example https://tex.stackexchange.com/a/361722/48
thank you rntz, I recognize I am at the very beginning on the road to a good knowledge of typography and how to use it well on the web. You enriched me with all those feedbacks! (:
Thanks for the Codepen. I think you did a good job of replicating the Medium look. Unsurprisingly, you are catching flak from HN users whose idea of perfect typography is "motherfuckingwebsite.com".
Typography does matter, especially in a time when "websites" are links I click on via a HN/Reddit/Twitter link and usually never visit again. Very different from even 15 years ago, when I pretty much only visited sites on my bookmarks list.
For sites that have visibly attractive, readable typography, I find myself wanting to stay on the site longer, if maybe just to explore some more content. That usually doesn't happen on most sites, since you can tell right away that it's a CMS template where the defaults weren't changed at all.
Right away I get the vibe that the content on the site is mass-produced, and not a good use of my attention. Sites that invest in good, unique typography on the other hand make me feel more like the content matters.
Typography does matter, especially in a time when "websites" are links I click on via a HN/Reddit/Twitter link and usually never visit again. Very different from even 15 years ago, when I pretty much only visited sites on my bookmarks list.
For sites that have visibly attractive, readable typography, I find myself wanting to stay on the site longer, if maybe just to explore some more content. That usually doesn't happen on most sites, since you can tell right away that it's a CMS template where the defaults weren't changed at all.
Right away I get the vibe that the content on the site is mass-produced, and not a good use of my attention. Sites that invest in good, unique typography on the other hand make me feel more like the content matters.
"Sites that invest in good, unique typography on the other hand make me feel more like the content matters"
That's a very good point of meditation!
The Medium Design blog is a great resource if you want to unpick their design. They talk in great detail about the various typefaces they have chosen over the years, and why. https://medium.design/
Butterick’s Practical Typography is the best beginner's guide to type on the web that I know about. If you want to know how to lay out pages with good typography, this takes you through everything in easily digestible chapters. https://practicaltypography.com/
Butterick’s Practical Typography is the best beginner's guide to type on the web that I know about. If you want to know how to lay out pages with good typography, this takes you through everything in easily digestible chapters. https://practicaltypography.com/
thank you, I didn't know about medium.design!
"I found myself always struggling for a basic set of rules to make a decent reading experience"
This is an excellent talk on web typography that I think you might find helpful. It includes a series of easy-to-follow guidelines to help improve web typography. If the pace of the talk is too slow, you can speed up the video:
https://www.youtube.com/watch?v=hbIZX6tE9JY
This is an excellent talk on web typography that I think you might find helpful. It includes a series of easy-to-follow guidelines to help improve web typography. If the pace of the talk is too slow, you can speed up the video:
https://www.youtube.com/watch?v=hbIZX6tE9JY
Thank you! I will definitely check it out!!
Back in 2012, Errol Morris performed a typeface experiment on unsuspecting NYT readers [1]. The results are worth reading (hint: use Baskerville if you want to be trusted)
[1] https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...
[1] https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...
Whoa! Fonts shaped our minds D:
I just want to thank you for taking the time to make all this and I applaud your attitude toward a lot of the criticism (which can often be so erroneously certain of itself here on HN).
I'd just say that with type it's important to take it back to its first principles: the interplay of positive and negative space in letterforms and their context. There is a little science, or a few hard rules, in typography but it is still a subjective design discipline and driven largely by the philosophy of the designer on the other side of the screen. Many of the best designers in the world often disagree with one another about the minutiae of type (Massimo Vignelli believed Helvetica was one of the only good typefaces a designer could use, while Erik Spiekermann dislikes it intensely and David Carson finds it dull and uninspiring).
On this foundation you can build a view of how different typefaces interact with one another. Do they harmonise when it comes to m-width, letterform curvature and/or thick-thin contrast, or do they instead complement one another in their differences? Both can be valid approaches and lead to good results.
In the end, typography like all design is a matter of context. Who will be reading your text, what will they be reading it on (phone, desktop, piece of paper?), where will they be when they read it (sitting in a lazy chair at home on a Sunday or on a train commute to work on a busy Monday?), what fonts can they support etc.
Thanks very much for your hard work :)
I'd just say that with type it's important to take it back to its first principles: the interplay of positive and negative space in letterforms and their context. There is a little science, or a few hard rules, in typography but it is still a subjective design discipline and driven largely by the philosophy of the designer on the other side of the screen. Many of the best designers in the world often disagree with one another about the minutiae of type (Massimo Vignelli believed Helvetica was one of the only good typefaces a designer could use, while Erik Spiekermann dislikes it intensely and David Carson finds it dull and uninspiring).
On this foundation you can build a view of how different typefaces interact with one another. Do they harmonise when it comes to m-width, letterform curvature and/or thick-thin contrast, or do they instead complement one another in their differences? Both can be valid approaches and lead to good results.
In the end, typography like all design is a matter of context. Who will be reading your text, what will they be reading it on (phone, desktop, piece of paper?), where will they be when they read it (sitting in a lazy chair at home on a Sunday or on a train commute to work on a busy Monday?), what fonts can they support etc.
Thanks very much for your hard work :)
For me, in typography the four most important things are these, in this order:
- appropriate choice of content/mono/headline typeface to the usage (regular content / preformatted content / headlines); that's really easy;
- spacing settings: line height, character horizontal spacing; that's also easy, though there's much more room for nuances;
- vertical rhythm, that's a big one; when wrong it's not as destructive to readability as what I mentioned above, but it feels really wrong, i.e. you're not sure why, but you just want to leave the site. Vertical rhythm is very hard due to technical reasons, and it's nuanced as well;
- and, finally, in the last place for me, the typeface choice. I find the differences between various fonts of the same type to have, by comparison to the things mentioned above, the least influence on my experience, whether in the aesthetic or functional sense. Not that I'm not sensitive to differences between typefaces, it's just that those other things seem to be much more influential.
I'd like to hear others' accounts of this.
- appropriate choice of content/mono/headline typeface to the usage (regular content / preformatted content / headlines); that's really easy;
- spacing settings: line height, character horizontal spacing; that's also easy, though there's much more room for nuances;
- vertical rhythm, that's a big one; when wrong it's not as destructive to readability as what I mentioned above, but it feels really wrong, i.e. you're not sure why, but you just want to leave the site. Vertical rhythm is very hard due to technical reasons, and it's nuanced as well;
- and, finally, in the last place for me, the typeface choice. I find the differences between various fonts of the same type to have, by comparison to the things mentioned above, the least influence on my experience, whether in the aesthetic or functional sense. Not that I'm not sensitive to differences between typefaces, it's just that those other things seem to be much more influential.
I'd like to hear others' accounts of this.
Definitely a checklist to add to my typography toolbelt. Thank you! (:
Nice! Thanks for sharing your research.
Edit: BTW, this shuld probably be a "Show HN:" post.
Edit: BTW, this shuld probably be a "Show HN:" post.
Thank you for your feedback! Sorry I am new to hacker news and I didn't know about that feature!
It's less of a feature and more of a convention. Just put "Show HN:" in front of the title if you're showing your work, or "Ask HN:" if you're asking a question without linking to an existing article. For "Show HN", it's customary to only submit each project once.
There is also "Tell HN:" but afaik it's mostly used by the mods, dang and sctb, to announce rule changes or new features.
There is also "Tell HN:" but afaik it's mostly used by the mods, dang and sctb, to announce rule changes or new features.
Matthew Butterick's Practical Typography is a great primer on all things typographical.
https://practicaltypography.com
https://practicaltypography.com
This is great work!
However, I would just drop the drop cap. I don't really think they serve any purpose on the web, and I don't think they work terribly well either (they're especially silly when a paragraph starts with a two letter word like "It", which on Medium they have both letters of as the drop cap: this may or may not be the correct way of doing it, but it looks ridiculous).
However, I would just drop the drop cap. I don't really think they serve any purpose on the web, and I don't think they work terribly well either (they're especially silly when a paragraph starts with a two letter word like "It", which on Medium they have both letters of as the drop cap: this may or may not be the correct way of doing it, but it looks ridiculous).
Thank you bshimmin!
Looks good, I have some remarks though.
Is making your blog look exactly like medium legal?
If it is, isn't that a dick move though?
I wish we'd presume, as a society, that everything intellectual is, at least implicitly, free to use.
Well, this is a style exercise to analyze what makes good typography. Not an attempt to steal their style (:
Medium themselves did that to svbtle iirc, so they would have zero ground for complaining about someone else being a dick.
"Good artists copy; great artists steal"
Fonts and Typography in Newspapers has always been incredibly important, when it comes to the audience they're trying to reach.
Nice work. I'm always after some thought out opinion when choosing colors and font so I'm glad to see this.
I am glad you find that helpful (:
The problem is, you are talking about art. And art is in the eye of the beholder. There are plenty of people who will disagree with your opinion and chosen fonts. I like all the fonts you used but don't like how they're used in your example.
So this becomes similar to a color palette site where someone shows a bunch of colors that you purportedly are able to use and are told they work well together. Until you use them together on your site and find them to be garish/boring/loud/goofy/amateurish/etc.
Of course, this is why we have typographers and graphic artists.
btw, if you go to real typographer web sites, you'll often read some groaning about Google fonts and you'll see that few, if any, use them for all the reasons they groan about them.
So this becomes similar to a color palette site where someone shows a bunch of colors that you purportedly are able to use and are told they work well together. Until you use them together on your site and find them to be garish/boring/loud/goofy/amateurish/etc.
Of course, this is why we have typographers and graphic artists.
btw, if you go to real typographer web sites, you'll often read some groaning about Google fonts and you'll see that few, if any, use them for all the reasons they groan about them.
I understand your point of view. However I am mainly a web developer but I often find myself doing also the design side of projects by necessity.
So this is only a basic attempt to learn how to make things look a little bit prettier.
BTW thank you for your feedback (:
"The problem is, you are talking about art. And art is in the eye of the beholder."
Typography is Graphic Design, not art. The goal is usually to impart knowledge to the viewer. A legible message objectively aids in this.
However, typography can tap the viewers knowledge for additional tone, for example, choosing era appropriate typefaces for 100 year old stories.
If you are trying impart an emotion, then post-modernist graphic design may eschew legibility for emotive punch, in which I would agree that it is very much a subjective response, however, I would still argue that it is design, not art.
Typography is Graphic Design, not art. The goal is usually to impart knowledge to the viewer. A legible message objectively aids in this.
However, typography can tap the viewers knowledge for additional tone, for example, choosing era appropriate typefaces for 100 year old stories.
If you are trying impart an emotion, then post-modernist graphic design may eschew legibility for emotive punch, in which I would agree that it is very much a subjective response, however, I would still argue that it is design, not art.
Art isn't about "looking pretty".
Imho biggest problem for creating SaaS experience is subscription management.
I've been looking for a drop in subscription manager with support for manual payment/credit card/bitcoin
But it seems no unified effort is being made in this direction.
I wonder where i can find a community of SaaS builders
I've been looking for a drop in subscription manager with support for manual payment/credit card/bitcoin
But it seems no unified effort is being made in this direction.
I wonder where i can find a community of SaaS builders
I've had luck with Recurly in the past (https://recurly.com/), I don't think it has support for Bitcoin though.
In the last days I spend some time dissecting Medium.com typography to find the secrets for their secret sauce.
Usually a great reading experience require a great font. Like Medium.com does.
However using google fonts in your web projects is always a good idea as their cdn's are lightning fast (and they are free).
I tried all fonts in google fonts website and found out that you can recreate their reading experience very very similarly with free fonts.
The best fonts (in alternative to Medium ones) in my opinion are:
- Lora, as content font - Playfair display, as brand font - Montserrat, as UI font
I recreated their reading experience for a blog post in a live demo: https://codepen.io/lucagez/full/bQObBe/
I found myself always struggling for for a basic set of rules to make a decent reading experience. So I made a minimal boilerplate useful for bootstrapping a project. I hope someone will find it useful.
Git repo: https://github.com/lucagez/medium.css
Happy typography,
Gez