Style Guide

Home
Style Guide

Style Guide

STYLE GUIDE

Humane Type in the Digital Age

January 25, 2016 · By Matej Latin .dateline

Thoughts on typography p.sc

An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts. p.attention-grabber; s/b lead

Statement Summary
Account	Due Date	Amount	Period
Visa - 3412	04/01/2016	$1,190	03/01/2016 - 03/31/2016
Visa - 3412	04/01/2016	$1,190	03/01/2016 - 03/31/2016
Visa - 3412	04/01/2016	$1,190	03/01/2016 - 03/31/2016

The typography of this industrial age was no longer handcrafted. Mass production and profit became more important. Quantity mattered more than the quality. The books and printed works in general lost a part of its humanity. The typefaces were not produced by craftsmen anymore. It was the machines printing and tying the books together now. The craftsmen had to let go of their craft and became a cog in the process. An extension of the industrial machine.

But the victory of the industrialism didn’t mean that the craftsmen were completely extinct. The two worlds continued to coexist independently. Each recognising the good in the other — the power of industrialism and the humanity of craftsmanship. This was the second transition that would strip typography of a part of its humanity. We have to go 500 years back in time to meet the first one.

The first transition .h2

A similar conflict emerged after the invention of the first printing press in Europe. Johannes Gutenberg invented movable type and used it to produce different compositions. His workshop could print up to 240 impressions per hour. Until then, the books were being copied by hand. All the books were handwritten and decorated with hand drawn ornaments and figures. A process of copying a book was long but each book, even a copy, was a work of art.

Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

The first printed books were, at first, perceived as inferior to the handwritten ones. They were smaller and cheaper to produce. Movable type provided the printers with flexibility that allowed them to print books in languages other than Latin. Gill describes the transition to industrialism as something that people needed and wanted. Something similar happened after the first printed books emerged. People wanted books in a language they understood and they wanted books they could take with them. They were hungry for knowledge and printed books satisfied this hunger.

Image of a person — The 42–Line Bible, printed by Gutenberg.

But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.

The digital age

The first transition took away a large part of humanity from written communication. Industrialisation, the second transition described by Eric Gill, took away most of what was left. But it’s the third transition that stripped it naked. Typefaces are faceless these days. They’re just fonts on our computers. Hardly anyone knows their stories. Hardly anyone cares. Flicking through thousands of typefaces and finding the “right one” is a matter of minutes.

In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.

—Massimo Vignelli

Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.

Loss of humanity through transitions .h2

Each transition took away a part of humanity from written language. Handwritten books being the most humane form and the digital typefaces being the least. Overuse of Helvetica is a good example. Messages are being told in a typeface just because it’s a safe option. It’s always there. Everyone knows it but yet, nobody knows it. Stop someone on the street and ask him what Helvetica is? Ask a designer the same question. Ask him where it came from, when, why and who designed it. Most of them will fail to answer these questions. Most of them used it in their precious projects but they still don’t spot it in the street.

Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect. .figure

—Josef Mueller–Brockmann

Typefaces don’t look handmade these days. And that’s all right. They don’t have to. Industrialism took that away from them and we’re fine with it. We’ve traded that part of humanity for a process that produces more books that are easier to read. That can’t be bad. And it isn’t.

Humane typography will often be comparatively rough and even uncouth; but while a certain uncouthness does not seriously matter in humane works, uncouthness has no excuse whatever in the productions of the machine. .blockquote

—Eric Gill

We’ve come close to “perfection” in the last five centuries. The letters are crisp and without rough edges. We print our compositions with high–precision printers on a high quality, machine made paper.

This is a h1 tag

This is a h2 tag

This is a h3 tag

This is a h4 tag

This is a h5 tag

This is a h6 tag

We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.

Chasing perfection .h2

Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?

This is the primary heading and there should only be one of these per page

A small paragraph to emphasis and show important bits.

This is a list item
So is this - there could be more. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic voluptatem placeat incidunt, assumenda saepe iste laboriosam ipsa itaque eius tempore, quam suscipit perferendis, reiciendis delectus blanditiis earum enim, consequatur facere!
Make sure to style list items to:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
A couple more
top level list items

Don't forget Ordered lists:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

A sub heading which is not as important as the first, but is quite imporant overall .h2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Most Downloaded Movies on BitTorrent, 2011 .table
Rank	Movie	Downloads	Grosses
torrentfreak.com
1	Fast Five	9,260,000	$626,137,675
2	The Hangover II	8,840,000	$581,464,305
3	Thor	8,330,000	$449,326,618
4	Source Code	7,910,000	$123,278,618
5	I Am Number Four	7,670,000	$144,500,437
6	Sucker Punch	7,200,000	$89,792,502
7	127 Hours	6,910,000	$60,738,797
8	Rango	6,480,000	$245,155,348
9	The King’s Speech	6,250,000	$414,211,549
10	Harry Potter and the Deathly Hallows Part 2	6,030,000	$1,328,111,219

A sub heading which is not as important as the second, but should be used with consideration. .h3

This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight. .blockquote

— Bill Gates

A sub heading which is not as important as the second, but should be used with consideration .h4

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

          
          #header h1 a {
            display: block;
            width: 300px;
            height: 80px;
          }

A sub heading which is not as important as the second, but should be used with consideration .h5

Definition list

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.

Lorem ipsum dolor sit amet

Spurious

/ˈsp(y)o͝orēəs/

(of a line of reasoning) apparently but not actually valid. "this spurious reasoning results in nonsense"
(of offspring) illegitimate.

This heading plays a relatively small bit part role, if you use it at all .h6

Address: Example address 224, Sweden

Preformated:
      it's
      spring
      and

         the

             goat-footed

      balloonMan    whistles
      far
      and
      wee

I am the a tag example
I am the abbr tag example
I am the cite tag example
I am the code tag example
I am the em tag example
I am the small tag example
I am the strong tag example
I am _{the sub tag} example
I am ^{the sup tag} example

Unordered list 01
Unordered list 02
Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
  - Unordered list inside list level 3
  - Unordered list inside list level 3

Ordered list 01
Ordered list 02
Ordered list 03
1. Ordered list inside list level 2
2. Ordered list inside list level 2
  1. Ordered list inside list level 3
  2. Ordered list inside list level 3

Description list title 01: Description list description 01
Description list title 02: Description list description 02; Description list description 03

Default h1 heading

{ "cookies": {}, "request_url": { "href": "https://default.trialsite.co/style-guide", "origin": "https://default.trialsite.co", "protocol": "https", "hostname": "default.trialsite.co", "path": "/style-guide", "params": {}, "originalParams": {} }, "request_data": { "ip": "3.133.120.10", "is_mobile": 0, "user_agent": "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)", "referrer": "" }, "currentmember": "", "is_logged": false, "device_type": "Desktop", "timezone": { "label": "(UTC-06:00) Central Time (Regina)", "offset": -6.0 }, "system_recaptcha_sitekey": "6Ld5QIoUAAAAAKznGOlK7z6mgqJ8ajRUc3CK5M17" }

Lorem ipsum lead copy dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id.

Lorem ipsum regular size dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id. Borrowed from https://bootswatch.com/default/

This is h2 heading

THis is within div .readable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis est nec augue fringilla, maximus tristique erat molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquet ex leo, at pellentesque odio blandit eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vestibulum mollis elit, sit amet bibendum augue sollicitudin ac. Aenean vitae risus dictum ante maximus pharetra vitae vitae enim. Sed feugiat mi facilisis enim condimentum consectetur. Cras vestibulum scelerisque nisi, vitae vestibulum enim placerat id.

h3 heading here

Donec commodo eleifend nisi, et efficitur sem volutpat ac. Aliquam eu orci quis nibh auctor laoreet quis nec quam. Donec sed vestibulum libero, quis rutrum erat. Maecenas at pharetra velit. Morbi dignissim risus vel lobortis scelerisque. Suspendisse orci ipsum, aliquet eget dignissim ut, eleifend consequat sem. Duis consectetur blandit metus. Vivamus id dapibus elit, congue lobortis sem. Curabitur viverra arcu ut malesuada semper. Integer massa augue, aliquam ac malesuada sit amet, imperdiet eu diam. Duis nec purus et lectus tincidunt vulputate.

Heading 4 goes here

Ut eleifend urna pellentesque, accumsan lacus imperdiet, sodales dui. Integer pellentesque justo sit amet pretium imperdiet. Suspendisse semper velit id velit accumsan tempor. Cras metus elit, lobortis at risus non, porttitor pulvinar lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem velit, efficitur sit amet nisl in, interdum congue velit. Maecenas quis dictum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent purus dolor, aliquet sed elit id, efficitur blandit libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id libero quis erat consectetur tristique non ac enim. Fusce ac purus libero. Nunc ultricies augue metus, a sagittis quam cursus vitae. Aenean mattis dapibus orci, non sagittis augue blandit sit amet.

Size five is this one

Vivamus condimentum auctor lacinia. In nec nisi in arcu mollis cursus sed eu nunc. Maecenas viverra sapien non bibendum accumsan. Aliquam semper, est ut molestie iaculis, risus nisl facilisis nisi, ac cursus lectus arcu sit amet nisl. Mauris tempus sapien eget purus hendrerit ornare. Fusce hendrerit nisi et massa convallis, et fermentum ligula suscipit. Sed bibendum diam ligula, in laoreet turpis dictum eget. Quisque cursus dapibus leo a rutrum.

This is last h6

Suspendisse in porttitor nunc. Sed elementum justo eu risus mattis tempor. Nunc fringilla malesuada leo, id rutrum nisi faucibus eget. Ut gravida odio in neque fringilla, vel laoreet elit ornare. Cras pulvinar eu elit at molestie. Aenean finibus ex ac ultrices rhoncus. Nam hendrerit, nisl nec sollicitudin lobortis, massa magna varius arcu, vel feugiat quam mauris a mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ac placerat magna.

Display 1

Display 2

Display 3

Display 4

Inline text elements

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Abbreviations

attr

HTML

Lists

Normal

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

List inline

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Description List

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Truncated term is truncated

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Text

regular text

.text-black

.text-primary

.text-secondary

.text-tertiary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-white

.text-medium-gray

.text-dark-gray

.text-black

.text-body

.text-muted

.text-black-50

.text-white-50

Links

Background Colours

.bg-primary

.bg-secondary

.bg-tertiary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-medium-gray

.bg-dark-gray

.bg-dark

.bg-black

.bg-white

.bg-transparent

Active Check Check

Active Radio Radio

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Pellentesque ornare sem lacinia quam venenatis vestibulum.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Basic

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Head Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Head LIGHT

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Bordered Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Borderless Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Borderless Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Hover Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Hover Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small Dark

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small Light

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Caption

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Type	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content
Primary	Column content	Column content	Column content
Secondary	Column content	Column content	Column content
Success	Column content	Column content	Column content
Danger	Column content	Column content	Column content
Warning	Column content	Column content	Column content
Info	Column content	Column content	Column content
Light	Column content	Column content	Column content
Dark	Column content	Column content	Column content

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.

Pills

Breadcrumbs

Pagination

Alerts

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Badges

Primary Secondary Success Danger Warning Info Light Dark

Basic

Contextual alternatives

Multiple bars

Striped

Animated

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

List groups

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

Cras justo odio Dapibus ac facilisis in Morbi leo risus

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.