August 27, 2019

225 words 2 mins read



Compact typography for the web

repo name lucagez/medium.css
repo link
language CSS
size (curr.) 6395 kB
stars (curr.) 541
created 2018-11-26
license MIT License

medium.css ✍

a minimal set of typography devoted to


npm install --save medium.css

If you are not using a bundler download the file medium.css and link it in your html



If you want to run the demo locally just clone the repo and run npm install and then npm start inside /demo directory


I found myself always struggling for for a basic set of rules to make a decent reading experience. I find this minimal boilerplate useful for bootstrapping a project with a typography created learning from the best:


This stylesheet is meant to be only a starting point. So it covers only the basics html elements. The elements covered are:

  • h1
  • h2
  • p
  • a
  • i
  • mark
  • blockquote
  • code

There are three custom classes:

  • .highlighted, highlights text setting background-color
  • .first-letter, a big first letter that spans two lines
  • .subtitle, for subtitles

Fonts used

The Google fonts I found that best mimics the feeling of reading experience:

  • Content font: Lora, serif
  • UI font: Montserrat, sans-serif
  • Brand font: Playfair Display, serif


All PRs are welcomed! If you have some ideas on how to extend this stylesheet don’t hesitate 😎



comments powered by Disqus