medium.css ✍
a minimal set of typography devoted to Medium.com
Installation
npm install --save medium.css
If you are not using a bundler download the file medium.css and link it in your html
Demo
live:
https://codepen.io/lucagez/full/bQObBe/
If you want to run the demo locally just clone the repo and run npm install and then npm start inside /demo directory
Why
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: Medium.com.
Usage
This stylesheet is meant to be only a starting point. So it covers only the basics html elements.
The elements covered are:
h1h2paimarkblockquotecode
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 Medium.com reading experience:
- Content font:
Lora, serif - UI font:
Montserrat, sans-serif - Brand font:
Playfair Display, serif
Contributing
All PRs are welcomed! If you have some ideas on how to extend this stylesheet don't hesitate ?
License
MIT