It's all about typography
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
53 comments
[ 3.0 ms ] story [ 107 ms ] threadEdit: BTW, this shuld probably be a "Show HN:" post.
There is also "Tell HN:" but afaik it's mostly used by the mods, dang and sctb, to announce rule changes or new features.
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
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).
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
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.
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.
https://practicaltypography.com
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
You're more than welcome to make your on effort stripping that out after the event, of course.
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.
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.
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.
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
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/
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.
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.
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.
- 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.
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
[1] https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye...
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.
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 :)