Improved typography styles for naked HTML (without any classnames) and Markdown-generated content. Demo page
npm install bettertext.css --save-dev
bower install bettertext.css --save
or use compiled version from CDN
-
https://unpkg.com/bettertext.css@latest/bettertext.css -
https://unpkg.com/bettertext.css@latest/bettertext.min.css https://unpkg.com/bettertext.css@latest/bettertext.min.css.map
Insert bettertext.css after normalize.css and after your @font-face declaration.
Or include bettertext.less into your project styles.
Component has global mixin with settings named .bettertext-settings(); and global variable bettertext which contains all the code.
Default settings:
.bettertext-settings() {
//settings
@fz: 16px; // default font-size in px
@rythm: 24px; // vertical rythm = line-height in pixels
@fz-small: 12px; // smaller font-size (px)
@linel: 50rem; // max-width for text (any css value)
@font-body: sans-serif; // body
@font-headers: sans-serif; // headers
@font-code: monospace, monospace; // code (duplication is intentional)
@scale1: 1.125; // header size multiplier for small screens
@scale2: 1.250; // header size multiplier for large screens
// margin for body, articles and sections (any css value)
@structure-margin: ~"calc(24px + 3vw)" 5vw;
// breakpoint to switch from 'mobile' to 'desktop'
@bettertext-breakpoint: ~"(min-width: 768px)";
//calculations
// ...
}Running with default parameters:
@import (less) "node_modules/bettertext.css/bettertext.less";Setting up basic parameters:
@import (less) "node_modules/bettertext.css/bettertext.less";
.bettertext-settings() {
//settings
@fz: 16px; // default font-size
@font-body: 'Arial', sans-serif; // body
@font-headers: 'Georgia', serif; // headers
@bettertext-breakpoint: ~"(min-width: 50em)"; // large screens starts from that value
}Deep customization: you able to redefine any formula in calculation section inside bettertext-settings mixin.
@import (less) "node_modules/bettertext.css/bettertext.less";
.bettertext-settings() {
//settings
@fz: 16px; // default font-size
@font-body: 'Arial', sans-serif; // body
@font-headers: 'Georgia', serif; // headers
@bettertext-breakpoint: ~"(min-width: 50em)"; // large screens starts from that value
//redefining header margin-top
@h1-mt: 3em;
@h2-mt: 2.5em;
@h3-mt: 2em;
@h4-mt: 1.5em;
@h5-mt: unit((2 * @lh * @fz / @h5-fz), em);
@h6-mt: unit((2 * @lh * @fz / @h6-fz), em);
}If you are not using LESS on your project you can fork and customize bettertext.css on codepen: adjust settings with your parameters, test with your HTML or Markdown, press "View Compiled" and grab compiled CSS.