The form of our letters, the older handwriting and inscriptions as much as the cuttings in use today, reflects a convention that has slowly solidified, an agreement hardened in many battles. Even after the Renaissance several European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material; yet even today, I hope, the last word about Fraktur has not been spoken.

The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty.

Apart from that, the roman minuscule has been our way of writing for hundreds of years. What followed were merely fashionable variations, here and there even deformations, of the noble basic form, but no improvement whatever. The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty. Garamond appeared on the scene at a time when the occidental book, as an object, cast off its medieval ponderousness and took up the form which today is still the best: the slender and upright rectangular body, comprising folded sheets stitched or sewn at the back, in a cover whose protruding edges protect the trimmed pages.

Pull Quote

HTML

<article class="athelas pa4">
  <p class="f6 f4-ns lh-copy measure center">
    The form of our letters, the older handwriting and inscriptions as much as
    the cuttings in use today, reflects a convention that has slowly solidified,
    an agreement hardened in many battles. Even after the Renaissance several
    European countries retained broken, blackletter national scripts in opposition to roman, the obligatory type for all Latin material; yet even today, I hope, the last word about Fraktur has not been spoken. 
  </p>
  <blockquote class="ph0 f4 f1-ns measure-narrow center">
    <p class="fw9 lh-copy lh-title-ns">The punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in their clarity, readability and beauty. 
    </p>
  </blockquote>
  <p class="f6 f4-ns lh-copy measure center">
    Apart from that, the roman minuscule has been our way of writing for hundreds
    of years. What followed were merely fashionable variations, here and there even
    deformations, of the noble basic form, but no improvement whatever. The
    punches of Claude Garamond, cut around 1530 in Paris, are simply unsurpassed in
    their clarity, readability and beauty. Garamond appeared on the scene at a
    time when the occidental book, as an object, cast off its medieval
    ponderousness and took up the form which today is still the best: the slender
    and upright rectangular body, comprising folded sheets stitched or sewn at
    the back, in a cover whose protruding edges protect the trimmed pages.
  </p>

</article>

css

.athelas {
    font-family: athelas, georgia, serif;
}

.fw9 {
    font-weight: 900;
}

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

.pa4 {
    padding: 2rem;
}

.ph0 {
    padding-left: 0;
    padding-right: 0;
}

.f4 {
    font-size: 1.25rem;
}

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

.measure {
    max-width: 30em;
}

.measure-narrow {
    max-width: 20em;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

@media screen and (min-width: 30em) {
    .lh-title-ns {
        line-height: 1.25;
    }

    .f1-ns {
        font-size: 3rem;
    }

    .f4-ns {
        font-size: 1.25rem;
    }
}

Css stats for this component

Gzipped Size
272B
Selectors
13
Declarations
15

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

npm i --save tachyons-font-family tachyons-font-weight tachyons-line-height tachyons-spacing tachyons-type-scale tachyons-typography tachyons-utilities

Other Components

articles

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

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 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 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

text

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