Typ

A typography template in just 1.28KB

Installation


npm install --save typ-css

Features


--text-rendering: optimizeLegibility;
--font-size: 16px;
--line-height: 1.5;
--font-family: sans-serif;
--font-family-code: monospace;

--heading-line-height: 1.25;
--heading-font-weight: 700;
--heading-margin-top: var(--gap-2);
--heading-margin-bottom: var(--gap-1);

--h1: 2rem;
--h2: 1.5rem;
--h3: 1.25rem;
--h4: 1rem;
--h5: 0.875rem;
--h6: 0.75rem;

--gap-1: 0.5em;
--gap-2: 1em;
--gap-3: 2em;

and more...

demo

Blockquote and em

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vero quas esse tempore, excepturi ducimus doloremque, quasi perferendis provident unde neque dolores earum nostrum aspernatur ex eaque alias, autem eum?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, sed.

Site title

Headings & Copy

First Header h1

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Second header h2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Third header h3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Fourth header h4

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Fifth header h5

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Sixth header h6

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Links

Sample text link Sample button link

Lists

Unordered list

Orange
Apple
Rhubarb
Rasberry
Blueberry
Cherry

Ordered list

First
Second
Third
Fourth
Fifth
Sixth

Definition list

Kick: 808
Snare: 909

Maine: Augusta
California: Sacremento
Oregon: Salem
New York: Albany

Ascender: The part of certain lowercase letters that extends above the x-height of a font.
Font: Traditionally, a complete set of characters for one typeface at one particular type size. Often used more loosely as a synonym for "typeface".
Golden Section: The ideal proportion according to the ancient Greeks. It is visualized as the division of a line into two unequal segments in such a way that the ratio of the smaller segment to the larger segment is equal to the ratio of the larger to the whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal approximately 0.618. A rectangle whose sides are of this proportion is called a "golden rectangle". Golden rectangles can be found in the proportions of the Parthenon and many medieval manuscripts.

An Example Article

Title

Lorem ipsum dolor sit amet, a strong tag example, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sequi rem, illo ducimus iusto odio.
- Author

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Footer

Random Stuff

This is for things like copyright info ~~Content that isn't accurate or relevant anymore.~~ This text has been inserted Generic span wrapper HTML How to meet ladies

This is inline text with _subscript and ^superscript elements.

f(x) = a₀ + a₁x + a₂x², where a² ≠ 0

07 September 2013

Footer