Typography

We follow a 6px baseline grid for achieving a vertical rhythm on all block-level elements in the app. With the 2015 redesign of our navigation we moved the app to the lighter, friendlier, and more legible Open Sans.

Headings

  • Main Heading

    30px/48px

    Semibold

    • 30px/48px
    • Semibold
  • Subpage title

    25px/36px

    Semibold

    • 25px/36px
    • Semibold
  • Section header

    21px/24px

    Semibold - italicized

    • 21px/24px
    • Semibold
  • Sub section heading

    17px/30px

    Semibold

    • 17px/30px
    • Semibold
  • Bold content within body or form labels

    15px/24px

    Semibold

    • 15px/24px
    • Semibold
  • Body content / copy

    15px/24px

    Regular

    • 15px/24px
    • Regular
  • button labels / meta content

    13px/22.5px

    Semibold

    • 13px/22.5px
    • Semibold

Paragraphs

Default text

If you pry it up, so as to get it overhead, and expose its rows of teeth, it seems a terrific portcullis; and such, alas! it proves to many a poor wight in the fishery, upon whom these spikes fall with impaling force.

Small meta text

But far more terrible is it to behold, when fathoms down in the sea, you see some sulky whale, floating there suspended, with his prodigious jaw, some fifteen feet long, hanging straight down at right-angles with his body, for all the world like a ship's jib-boom.

Small meta text with 80% opacity

This whale is not dead; he is only dispirited; out of sorts, perhaps; hypochondriac; and so supine, that the hinges of his jaw have relaxed, leaving him there in that ungainly sort of plight, a reproach to all his tribe, who must, no doubt, imprecate lock-jaws upon him.

The default body text is 15px. For optimum reading length, the paragraph-width is capped at 635px.

  • Helper classes:
  • small-meta for 13px text
  • dim-el for light gray text (80% opacity)
  • fwb for bold text (600 weight)
  • fwl for light text (300 weight)
  • fsi for italics text
  • LESS variables:
  • @base-font-family for default font-stack – "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;
  • @mono-font-family for monospace font-stack – "Source Code Pro", Consolas, "Lucida Console", Courier, monospace;
  • @largeCopy for 17px text
  • @mediumCopy for 15px text
  • @smallCopy for 13px text

Main section 1

2-column sub-section

And thus in the midst of a city of wild conflict, filled with the alarms of war; with death and destruction reaping their terrible harvest around her, did Dejah Thoris, Princess of Helium, true daughter of Mars, the God of War, promise herself in marriage to John Carter, Gentleman of Virginia.

Sometime later Tars Tarkas and Kantos Kan returned to report that Zodanga had been completely reduced. Her forces were entirely destroyed or captured, and no further resistance was to be expected from within. Several battleships had escaped, but there were thousands of war and merchant vessels under guard of Thark warriors.

2-column sub-section

At the foot of the throne these two parties separated and halted, facing each other at opposite sides of the aisle. Then came more dignitaries, and the officers of the palace and of the army, and finally two figures entirely muffled in scarlet silk, so that not a feature of either was discernible. These two stopped at the foot of the throne, facing Than Kosis. When the balance of the procession had entered and assumed their stations Than Kosis addressed the couple standing before him. I could not hear his words, but presently two officers advanced and removed the scarlet robe from one of the figures, and I saw that Kantos Kan had failed in his mission, for it was Sab Than, Prince of Zodanga, who stood revealed before me.

1-column sub-section

At one end of the chamber, upon massive golden thrones encrusted with diamonds, sat Than Kosis and his consort, surrounded by officers and dignitaries of state. Before them stretched a broad aisle lined on either side with soldiery, and as I looked there entered this aisle at the far end of the hall, the head of a procession which advanced to the foot of the throne.

Main section 2

2-column sub-section

Like its master, it was entirely devoid of hair, but was of a dark slate color and exceeding smooth and glossy. Its belly was white, and its legs shaded from the slate of its shoulders and hips to a vivid yellow at the feet. The feet themselves were heavily padded and nailless, which fact had also contributed to the noiselessness of their approach, and, in common with a multiplicity of legs, is a characteristic feature of the fauna of Mars.

2-column sub-section

Dispatching one of my men to Tars Tarkas for a detail of fifty Tharks, with word of my intentions, I ordered ten warriors to capture and open one of the great gates while with the nine remaining I took the other. We were to do our work quietly, no shots were to be fired and no general advance made until I had reached the palace with my fifty Tharks.

3-column sub-section

I have never told this story, nor shall mortal man see this manuscript until after I have passed over for eternity. I know that the average human mind will not believe what it cannot grasp, and so I do not purpose being pilloried by the public, the pulpit, and the press, and held up as a colossal liar when I am but telling the simple truths which some day science will substantiate.

3-column sub-section

My name is John Carter; I am better known as Captain Jack Carter of Virginia. At the close of the Civil War I found myself possessed of several hundred thousand dollars (Confederate) and a captain's commission in the cavalry arm of an army which no longer existed; the servant of a state which had vanished with the hopes of the South. Masterless, penniless, and with my only means of livelihood, fighting, gone, I determined to work my way to the southwest and attempt to retrieve my fallen fortunes in a search for gold.

3-column sub-section

I spent nearly a year prospecting in company with another Confederate officer, Captain James K. Powell of Richmond. We were extremely fortunate, for late in the winter of 1865, after many hardships and privations, we located the most remarkable gold-bearing quartz vein that our wildest dreams had ever pictured.