https://github.com/lucagez/medium.css

Compact typography for the web
https://github.com/lucagez/medium.css

Last synced: 5 days ago
JSON representation

Compact typography for the web

• Host: GitHub
• URL: https://github.com/lucagez/medium.css
• Owner: lucagez
• License: mit
• Created: 2018-11-26T17:01:54.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-19T23:12:03.000Z (almost 6 years ago)
• Last Synced: 2024-05-22T16:31:57.299Z (6 months ago)
• Language: CSS
• Size: 6.1 MB
• Stars: 638
• Watchers: 10
• Forks: 55
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
![](./demo/gif/medium.gif)

# medium.css ✍

> a minimal set of typography devoted to Medium.com

## Installation

```sh

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:

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