tufte-css

css-framework typography layout

tufte-css is a CSS library that allows you to apply Edward Tufte's distinctive style to web pages. This style is characterized by simplicity, well-set typography, extensive sidenotes, and tight integration of graphics and charts.

Latest Ver 1.8.0
Homepage
Github
0
6,148
Design is most powerful when it's invisible.
Design clean and intuitive web documents with tufte-css.
tufte-css is a CSS framework that enables the implementation of Edward Tufte's visual and typographic style in web documents.
License: MIT
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.css
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf
https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.
📄 HTML
<article><section><h1>Example Header</h1><p>Main content here with <span class="sidenote">This is a sidenote.</span></p></section></article>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css" rel="stylesheet">

⚡ Top Tools for Developers
Text Compare

Text Comparison

Easily spot the differences between two texts.

Favicon Generator

Favicon Generator

Quickly and easily generate favicons.

Lorem Ipsum Generator

Lorem Ipsum Generator

Generate placeholder text for your designs.

Character Counter

Character Counter

Check character and word count in real time.

SRT ↔ SMI

SRT ↔ SMI Converter

Easily convert between subtitle formats.

Text Extract(OCR)

Image Text Extractor

Automatically extract text from images.