
It's all about typography - lucagez
Crafting awesome digital experiences is difficult. Let alone create a good set of rules of a good reading experience!<p>In the last days I spend some time dissecting Medium.com typography to find the secrets for their secret sauce.<p>Usually a great reading experience require a great font. Like Medium.com does.<p>However using google fonts in your web projects is always a good idea as their cdn&#x27;s are lightning fast  (and they are free).<p>I tried all fonts in google fonts website and found out that you can recreate their reading experience very very similarly with free fonts.<p>The best fonts (in alternative to Medium ones) in my opinion are:<p>- Lora, as content font
- Playfair display, as brand font
- Montserrat, as UI font<p>I recreated their reading experience for a blog post in a live demo: https:&#x2F;&#x2F;codepen.io&#x2F;lucagez&#x2F;full&#x2F;bQObBe&#x2F;<p>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.<p>Git repo: https:&#x2F;&#x2F;github.com&#x2F;lucagez&#x2F;medium.css<p>Happy typography,<p>Gez
======
anc84
> 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](https://google-webfonts-
helper.herokuapp.com/fonts)

~~~
basch
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.

~~~
detritus
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.

~~~
stan_rogers
Using the bandwidth and batteries _you_ didn't pay for.

~~~
detritus
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.

~~~
basch
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.

~~~
detritus
'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.

~~~
basch
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.

~~~
detritus
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.

------
mrzool
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](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/](http://mrmrs.cc/writing/2016/03/17/webfonts/)

Edit: fix URL, formatting

~~~
lucagez
Thank you mrzool, I accept the criticism. I think I will try to understand
better the use of system fonts (:

------
rntz
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://practicaltypography.com/charter.html)
[https://www.samiam.org/blog/2014-07-04.html](https://www.samiam.org/blog/2014-07-04.html)
[https://ctan.org/pkg/xcharter?lang=en](https://ctan.org/pkg/xcharter?lang=en)
[https://software.sil.org/charis/](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.

~~~
pavlov
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.

~~~
mbrock
Do you find Knuth’s books ugly and hard to read?

~~~
pavlov
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.

~~~
svat
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](https://tex.stackexchange.com/a/361722/48)

------
rchaud
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.

~~~
lucagez
"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!

------
Foomandoonian
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/](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/](https://practicaltypography.com/)

~~~
lucagez
thank you, I didn't know about medium.design!

------
open-source-ux
_" 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](https://www.youtube.com/watch?v=hbIZX6tE9JY)

~~~
lucagez
Thank you! I will definitely check it out!!

------
scroot
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...](https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-
hearken-o-earth/)

~~~
lucagez
Whoa! Fonts shaped our minds D:

------
michaelscott
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 :)

------
dmos62
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.

~~~
lucagez
Definitely a checklist to add to my typography toolbelt. Thank you! (:

------
webmaven
Nice! Thanks for sharing your research.

Edit: BTW, this shuld probably be a "Show HN:" post.

~~~
lucagez
Thank you for your feedback! Sorry I am new to hacker news and I didn't know
about that feature!

~~~
majewsky
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.

------
mattkevan
Matthew Butterick's _Practical Typography_ is a great primer on all things
typographical.

[https://practicaltypography.com](https://practicaltypography.com)

------
bshimmin
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).

~~~
lucagez
Thank you bshimmin!

------
arc2
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?

~~~
dmos62
I wish we'd presume, as a society, that everything intellectual is, at least
implicitly, free to use.

------
ourcat
Fonts and Typography in Newspapers has always been incredibly important, when
it comes to the audience they're trying to reach.

------
quickthrower2
Nice work. I'm always after some thought out opinion when choosing colors and
font so I'm glad to see this.

~~~
lucagez
I am glad you find that helpful (:

------
sureaboutthis
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.

~~~
lucagez
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 (:

------
InGodsName
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

~~~
sksksk
I've had luck with Recurly in the past
([https://recurly.com/](https://recurly.com/)), I don't think it has support
for Bitcoin though.

