Vertical Rhythm

For the creative developer

Github

How it works

Import VR Mixin

@import 'mixins/vr/vr-main';

Import the mixin first before any other SCSS so you can override it where necessary.

Set base typograhy

$show-baseline: true;

$font-display: Arial, sans-serif;
$cap-font-display: 0.02825;

$px-font-size: 16;
$px-line-height: 24;

$modular-scale: 'golden section';

VR takes into account the cap height of different typefaces. This is the only number that needs some fine-tuning to get everything just right. Located in: <_vr-user-settings.scss>

Personal styling

div { margin-bottom: $distance-s; }
h1 { @include vr($font-display, $font-size-m); }
code { padding: $paragraph-trailer; }
img { max-height: $size-m; }

All alignment classes are based on the $rhythm ($base-font-size * $base-line-height).

Borders

.foo {
	margin-top: ($border-width-m * -1);
	border-top: $border-width-m solid $black;
}

.bar {
	margin-bottom: ($distance-s - $border-width-m);
	border-bottom: $border-width-m solid $black;
}

Use negative margins to align elements that have a top- and/or bottom border(s). Aligning borders might be a bit tricky at first, but eventually it becomes second nature.

Typography

Header 1

Lynx c.q. vos prikt bh: dag zwemjuf!

Header 2

Lynx c.q. vos prikt bh: dag zwemjuf!

Header 3

Lynx c.q. vos prikt bh: dag zwemjuf!

Header 4

Lynx c.q. vos prikt bh: dag zwemjuf!

Header 5

Lynx c.q. vos prikt bh: dag zwemjuf!

Header 6

Lynx c.q. vos prikt bh: dag zwemjuf!

Paragraph

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Small text

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Blockquote

“Ver­ti­cal Rhy­thm is the ho­ly grail of front­end de­ve­lop­ment.”

— Olaf Muller

Buttons

Form elements

Select
Choose

Example article

Ty­po­gra­phy

From Wikipedia, the free encyclopedia

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).

The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. Typography also may be used as a decorative device, unrelated to communication of information.

Table of contents

  • History
    • Evolution
    • Experimental typeface uses
    • Techniques
  • Scope
  • Text typefaces
    • Color
    • Principles of the craft
  • Display graphics
    • Advertising
    • Inscriptional and architectural lettering
  • See also
  • Notes
    • General References
  • External links

History

The essential criterion of type identity was met by medieval print artifacts such as the Latin Pruefening Abbey inscription of 1119 that was created by the same technique as the Phaistos disc. The silver altarpiece of patriarch Pellegrinus II (1195−1204) in the cathedral of Cividale was printed with individual letter punches.

Apparently, the same printing technique may be found in tenth to twelfth century Byzantine reliquaries. Other early examples include individual letter tiles where the words are formed by assembling single letter tiles in the desired order, which were reasonably widespread in medieval Northern Europe.

Typography with movable type was invented during the eleventh-century Song dynasty in China by Bi Sheng (990–1051). His movable type system was manufactured from ceramic materials, and clay type printing continued to be practiced in China until the Qing Dynasty.

Wang Zhen was one of the pioneers of wooden movable type. Although the wooden type was more durable under the mechanical rigors of handling, repeated printing wore the character faces down and the types could be replaced only by carving new pieces.

Evolution

The design of typefaces has developed alongside the development of typesetting systems. Although typography has evolved significantly from its origins, it is a largely conservative art that tends to cleave closely to tradition. This is because legibility is paramount, and so the typefaces that are the most readable usually are retained.

In addition, the evolution of typography is inextricably intertwined with lettering by hand and related art forms, especially formal styles, which thrived for centuries preceding typography, and so the evolution of typography must be discussed with reference to this relationship.

The development of Roman typeface can be traced back to Greek lapidary letters. Greek lapidary letters were carved into stone and “one of the first formal uses of Western letterforms”; after that, Roman lapidary letterforms evolved into the monumental capitals, which laid the foundation for Western typographical design, especially serif typefaces.

There are two styles of Roman typefaces: the old style, and the modern. The former is characterized by its similarly-weighted lines, while the latter is distinguished by its contrast of light and heavy lines. Often, these styles are combined.