9.5.1 If the text will be read on the screen, design it for that medium.

By Robert Bringhurst

Like a forest or a garden or a field, an honest page of letters can absorb – and will repay – as much attention as it is given. Much type now, however, is composed not for the page but for the screen of a computer. That screen can be alive with flowing color, but the best computer monitors have dismal resolution (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of the norm for professional digital typesetting). When the text is crudely rendered, the eye goes looking for distraction, which the screen is all too able to provide.

The screen mimics the sky, not the earth. It bombards the eye with light instead of waiting to repay the gift of vision. It is not simultaneously restful and lively, like a field full of flowers, or the face of a thinking human being, or a well-made typographic page. And we read the screen the way we read the sky: in quick sweeps, guessing at the weather from the changing shapes of clouds, or like astronomers, in magnified small bits, examining details. We look to it for clues and revelations more than wisdom. This makes it an attractive place for advertising and dogmatizing, but not so good a place for thoughtful text.

The screen, in other words, is a reading environment even more fugitive than the newspaper. Intricate long sentences full of unfamiliar words stand little chance. At text size, subtle and delicate letterforms stand little chance as well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In the harsh light and coarse resolution of the screen such accessories are difficult to see; what is worse, they dispel the essential illusion of speed. so the links and jumps of hypertext replace them. All the subtexts then can be the same size and readers are at liberty to skip from text to text like children switching channels on tv. When reading takes this form, sentences and letterforms retreat to blunt simplicity. Forms bred on newsprint and signage are most likely to survive.

Large Title Text

HTML

<article class="pa3 pa5-ns">
  <h1 class="f2 f-subheadline-ns mb4">9.5.1 If the text will be read on the screen, design it for that medium.</h1>
  <p class="gray f6 mb4 ttu tracked">By Robert Bringhurst</p>
  <p class="f4 f3-ns measure lh-copy">
    Like a forest or a garden or a field, an honest page of letters can absorb &ndash;
    and will repay &ndash; as much attention as it is given. Much type now, however, is
    composed not for the page but for the screen of a computer. That screen can be
    alive with flowing color, but the best computer monitors have dismal resolution
    (about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
    the norm for professional digital typesetting). When the text is crudely
    rendered, the eye goes looking for distraction, which the screen is all too
    able to provide.
  </p>
  <p class="f4 f3-ns measure lh-copy">
    The screen mimics the sky, not the earth. It bombards the eye with light
    instead of waiting to repay the gift of vision. It is not simultaneously
    restful and lively, like a field full of flowers, or the face of a thinking
    human being, or a well-made typographic page. And we read the screen the way
    we read the sky: in quick sweeps, guessing at the weather from the changing
    shapes of clouds, or like astronomers, in magnified small bits, examining
    details. We look to it for clues and revelations more than wisdom. This makes
    it an attractive place for advertising and dogmatizing, but not so good a
    place for thoughtful text.
  </p>
  <p class="f4 f3-ns measure lh-copy">
    The screen, in other words, is a reading environment even more fugitive than
    the newspaper. Intricate long sentences full of unfamiliar words stand little
    chance. At text size, subtle and delicate letterforms stand little chance as
    well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
    the harsh light and coarse resolution of the screen such accessories are
    difficult to see; what is worse, they dispel the essential illusion of speed.
    so the links and jumps of hypertext replace them. All the subtexts then can be
    the same size and readers are at liberty to skip from text to text like
    children switching channels on tv. When reading takes this form, sentences and
    letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
    are most likely to survive.
  </p>
</article>

css

.tracked {
    letter-spacing: .1em;
}

.lh-copy {
    line-height: 1.5;
}

.gray {
    color: #777;
}

.pa3 {
    padding: 1rem;
}

.mb4 {
    margin-bottom: 2rem;
}

.ttu {
    text-transform: uppercase;
}

.f2 {
    font-size: 2.25rem;
}

.f4 {
    font-size: 1.25rem;
}

.f6 {
    font-size: .875rem;
}

.measure {
    max-width: 30em;
}

@media screen and (min-width: 30em) {
    .pa5-ns {
        padding: 4rem;
    }

    .f-subheadline-ns {
        font-size: 5rem;
    }

    .f3-ns {
        font-size: 1.5rem;
    }
}

Css stats for this component

Gzipped Size
266B
Selectors
13
Declarations
13

Install via npm Only installs the needed tachyons-modules for this component

npm i --save tachyons-letter-spacing tachyons-line-height tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-typography

Other Components

articles

Feature Full Bleed Background Large Title Text Left Title Top Border Left Title Photo Essay Single Column Large Title Title Text Image Title Text

avatars

Circle Border Circle Double Ring Rounded Large Rounded Medium Rounded Small Square

banners

Basic

buttons

Basic Pill Grow Pill

cards

Album Centered Album Left News Card Product Card Profile Card Title Subtitle Profile Card Text Card

collections

Albums Movies Posters Dim Posters Square Title Subtitle

definition-lists

Simple

footers

Simple Large Type Small Print Social Circles Social Text Social

forms

Newsletter Subscription Sign In Sign Up

headers

Circle Avatar Title Subtitle Rounded Avatar Title Subtitle Startup Hero

layout

Aspect Ratio 16x9 Aspect Ratio 1x1 Aspect Ratio 3x4 Aspect Ratio 4x3 Aspect Ratio 4x6 Aspect Ratio 5x7 Aspect Ratio 5x8 Aspect Ratio 6x4 Aspect Ratio 7x5 Aspect Ratio 8x5 Aspect Ratio 9x16 Centered Container Five Column Collapse Alternate Five Column Collapse Asymmetrical Five Column Collapse Mixed Five Column Collapse One Five Column Fixed Table Layout Grid Mixed Rows Fixed Table Layout Grid Flag Object Bottom Flag Object Collapse Flag Object Top Flag Object Four Column Collapse Two Collapse One Four Column Collapse Two Four Column Full Bleed 16x9 Full Bleed 4x6 Full Bleed 5x7 Full Bleed 5x8 Full Bleed 6x4 Full Bleed 7x5 Full Bleed 8x5 Full Bleed 9x16 Full Bleed Square Full Screen Centered Title Horizontal Aspect Ratios Three Column Collapse One Three Column Two Column Collapse One Two Column

lists

Border Spaced Border Tight Follower Notifications Rounded Square Avatar Follower Notifications Hashtags Items Image Title Price Large Links Inline Links Animate Color Links Inline Links With Borders Inline Slab Stat Large Slab Stat Small Slab Stat Title Text

nav

Fixed Semi Transparent Large Title Link List List Overflow Logo Links Inline Collapse Logo Links Inline Logo Titles Links Centered Title Link List

pages

4x4 Mixed Grid Double Swiss Cover Five Columns

quotes

Left Border Pull Quote

text

Large Paragraph Narrow Paragraph Paragraph Small Narrow Paragraph Small Paragraph Wide Paragraph