https://github.com/attitude/typographicss

Designing a perfect CSS text frame
https://github.com/attitude/typographicss

Last synced: about 6 hours ago
JSON representation

Designing a perfect CSS text frame

• Host: GitHub
• URL: https://github.com/attitude/typographicss
• Owner: attitude
• License: mit
• Created: 2016-09-08T08:52:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-03-08T11:03:28.000Z (8 months ago)
• Last Synced: 2024-03-08T12:24:37.981Z (8 months ago)
• Language: CSS
• Homepage: https://attitude.github.io/typographicss/
• Size: 214 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TypographiCSS

Typographically accurate text in CSS

![TypographiCSS](typographicss.gif)

[See demo](https://attitude.github.io/typographicss/)

## Usage

```less

.typographicss-mixin(

    16, // Font size in points

    24, // Line height in points

    24, // Margin before

    24, // Margin after

    16, // Font-size base for EMs calculations

    70  // Cap height of the specific font; 80 is default

);

```

## More reading

[Designing a perfect text frame in CSS on Medium](https://medium.com/@martin_adamko/designing-a-perfect-text-frame-in-css-cfa8dc843867)