MelangeCSS Reference

Current Version: 1.0.0-RC4

Typography ( Medium Width )†

Text rendering can be tricky, however the use of a fixed font scale and a limited number of other tranformations for letter spacing and leading can provide myriad combinations to meet most needs without having to endlessly tweak precise values. The result of the fixed set up typographic features is general consistency and harmony regardless of the styles chosen.

Properties

Aliases

These violate the naming conventions, but are convienient as aliases for more commonly-used needs.

b-m
Aliases Bold
 
.b-m {
  font-weight: bold;
}
The spice must flow!
i-m
Aliases Italic
 
.i-m {
  font-style: italic;
}
The spice must flow!
sc-m
Aliases Small Caps
 
.sc-m {
  font-variant: small-caps;
}
The spice must flow!
u-m
Aliases Underline
 
.u-m {
  text-decoration: underline;
}
The spice must flow!
p-m
Aliases Content paragraph with measure and lh-copy
 
.p-m {
  max-width: var(--mg-tw);
  line-height: var(--mg-lh-copy);
}
“God Emperor of Dune” is often considered the best of the series, however the first book—“Dune”—is the safer bet if you intended to read only one.
Font Families
ff*
ff-sans-m 
.ff-sans-m {
  font-family: var(--mg-ff-sans);
}
The spice must flow
ff-serif-m 
.ff-serif-m {
  font-family: var(--mg-ff-serif);
}
The spice must flow
ff-mono-m 
.ff-mono-m {
  font-family: var(--mg-ff-mono);
}
The spice must flow
ff-cursive-m 
.ff-cursive-m {
  font-family: var(--mg-ff-cursive);
}
The spice must flow
ff-fantasy-m 
.ff-fantasy-m {
  font-family: var(--mg-ff-fantasy);
}
The spice must flow
Font Scale
f*
Modular Scale
f-1-m 
.f-1-m {
  font-size: var(--mg-fs-1);
}
The spice must flow!
f-2-m 
.f-2-m {
  font-size: var(--mg-fs-2);
}
The spice must flow!
f-3-m 
.f-3-m {
  font-size: var(--mg-fs-3);
}
The spice must flow!
f-4-m 
.f-4-m {
  font-size: var(--mg-fs-4);
}
The spice must flow!
f-5-m 
.f-5-m {
  font-size: var(--mg-fs-5);
}
The spice must flow!
f-6-m 
.f-6-m {
  font-size: var(--mg-fs-6);
}
The spice must flow!
f-7-m 
.f-7-m {
  font-size: var(--mg-fs-7);
}
The spice must flow!
f-8-m 
.f-8-m {
  font-size: var(--mg-fs-8);
}
The spice must flow!
f-9-m 
.f-9-m {
  font-size: var(--mg-fs-9);
}
The spice must flow!
Font Style
fs-normal-m 
.fs-normal-m {
  font-style: normal;
}
The spice must flow!
fs-italic-m
Font Style Italic
 
.fs-italic-m {
  font-style: italic;
}
The spice must flow!
Font Variant
fv-sc-m
Font Variant Small Caps
 
.fv-sc-m {
  font-variant: small-caps;
}
The spice must flow!
fv-normal-m
Font Variant Normal
 
.fv-normal-m {
  font-variant: normal;
}
The spice must flow!
Font Weights
fw*
fw-normal-m 
.fw-normal-m {
  font-weight: normal;
}
The spice must flow!
fw-bold-m 
.fw-bold-m {
  font-weight: bold;
}
The spice must flow!
fw-1-m 
.fw-1-m {
  font-weight: 100;
}
The spice must flow!
fw-2-m 
.fw-2-m {
  font-weight: 200;
}
The spice must flow!
fw-3-m 
.fw-3-m {
  font-weight: 300;
}
The spice must flow!
fw-4-m 
.fw-4-m {
  font-weight: 400;
}
The spice must flow!
fw-5-m 
.fw-5-m {
  font-weight: 500;
}
The spice must flow!
fw-6-m 
.fw-6-m {
  font-weight: 600;
}
The spice must flow!
fw-7-m 
.fw-7-m {
  font-weight: 700;
}
The spice must flow!
fw-8-m 
.fw-8-m {
  font-weight: 800;
}
The spice must flow!
fw-9-m 
.fw-9-m {
  font-weight: 900;
}
The spice must flow!
Indent
indent*
indent-0-m 
.indent-0-m {
  text-indent: 0;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-1-m 
.indent-1-m {
  text-indent: var(--mg-ident-1);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-2-m 
.indent-2-m {
  text-indent: var(--mg-ident-2);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent-3-m 
.indent-3-m {
  text-indent: var(--mg-ident-3);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--1-m 
.indent--1-m {
  text-indent: var(--mg-ident--1);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--2-m 
.indent--2-m {
  text-indent: var(--mg-ident--2);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
indent--3-m 
.indent--3-m {
  text-indent: var(--mg-ident--3);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience from the originals.
Leading/Line Height
lh*
lh-solid-m 
.lh-solid-m {
  line-height: var(--mg-lh-solid);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
lh-title-m 
.lh-title-m {
  line-height: var(--mg-lh-title);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
lh-copy-m 
.lh-copy-m {
  line-height: var(--mg-lh-copy);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
Measure

Measure is a convienience for setting max widths appropriate for reading text, and works regardless of font size. It uses ch units to achieve this.

measure*
measure-m 
.measure-m {
  max-width: var(--mg-tw);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
measure-wide-m 
.measure-wide-m {
  max-width: var(--mg-tw-wide);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
measure-narrow-m 
.measure-narrow-m {
  max-width: var(--mg-tw-narrow);
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
Text Align
tr-m
Text Align Right
 
.tr-m {
  text-align: right;
}
The spice must flow!
tc-m
Text Align Center
 
.tc-m {
  text-align: center;
}
The spice must flow!
tl-m
Text Align Left
 
.tl-m {
  text-align: left;
}
The spice must flow!
Text Decoration
tdn-m
Text Decoration None
 
.tdn-m {
  text-decoration: none;
}
The spice must flow!
hover-tdn-m
Text Decoration None
 
.hover-tdn-m:hover {
  text-decoration: none;
}
The spice must flow!
tdu-m
Text Decoration Underline
 
.tdu-m {
  text-decoration: underline;
}
The spice must flow!
hover-tdu-m
Text Decoration Underline
 
.hover-tdu-m:hover {
  text-decoration: underline;
}
The spice must flow!
tds-m
Text Decoration Strike
 
.tds-m {
  text-decoration: line-through;
}
The spice must flow!
hover-tds-m
Text Decoration Strike
 
.hover-tds-m:hover {
  text-decoration: line-through;
}
The spice must flow!
tdo-m
Text Decoration Overline
 
.tdo-m {
  text-decoration: overline;
}
The spice must flow!
hover-tdo-m
Text Decoration Overline
 
.hover-tdo-m:hover {
  text-decoration: overline;
}
The spice must flow!
Text Tranform
ttn-m
Text Tranform None
 
.ttn-m {
  text-transform: none;
}
The spice must flow!
ttu-m
Text Tranform Uppercase
 
.ttu-m {
  text-transform: uppercase;
}
The spice must flow!
ttl-m
Text Tranform Lowercase
 
.ttl-m {
  text-transform: lowercase;
}
The spice must flow!
ttc-m
Text Tranform Capitalize
 
.ttc-m {
  text-transform: capitalize;
}
The spice must flow!
Tracking / Letter Spacing
tracked*
tracked-m 
.tracked-m {
  letter-spacing: var(--mg-ls);
}
The spice must flow!
tracked-tight-m 
.tracked-tight-m {
  letter-spacing: var(--mg-ls-tight);
}
The spice must flow!
tracked-mega-m 
.tracked-mega-m {
  letter-spacing: var(--mg-ls-mega);
}
The spice must flow!
tracked-none-m 
.tracked-none-m {
  letter-spacing: var(--mg-ls-none);
}
The spice must flow!
Vertical Align

While vertical alignemnt can be specified in artbirary lengbths and percentages, baseline, top, middle, and bottom are sufficient for most use-cases.

va-baseline-m
Vertical Align Baseline
 
.va-baseline-m {
  vertical-align: baseline;
}
The spice must flow!
va-middle-m
Vertical Align Middle
 
.va-middle-m {
  vertical-align: middle;
}
The spice must flow!
va-top-m
Vertical Align Top
 
.va-top-m {
  vertical-align: top;
}
The spice must flow!
va-bottom-m
Vertical Align Bottom
 
.va-bottom-m {
  vertical-align: bottom;
}
The spice must flow!
White Space
ws-normal-m
White Space Normal
 
.ws-normal-m {
  white-space: normal;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
ws-nowrap-m
White Space No Wrap
 
.ws-nowrap-m {
  white-space: nowrap;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.
ws-pre-m
White Space Pre
 
.ws-pre-m {
  white-space: pre;
}
Although “Hunters of Dune” and “Sandworms of Dune” carry on the story started by the original six books, you will get a perfectly fine reading experience by reading only “Dune”, “Dune Messiah”, “Children of Dune”, “God Emperor of Dune”, “Heretics of Dune”, and finishing with “Chapterhouse Dune”. Trust me.