Colophon

In the print tradition, a colophon is a supplement, usually found on the last page of a book, where technical details about typefaces, paper, ink and binding are found.

The design and creation of this site would have turned out very differently were it not for the help of many from the design and technology communities. We’re following this tradition to give credit and description to the many pieces that make up this project.

The Zeugma Princess

The Zeugma Princess is our pet name for what is commonly referred to as the Gypsy Girl Mosaic fragment. Her eyes seem to convey some haunting tale, but she has no mouth to tell us the story. She was found in the ancient city of Zeugma, located in the present-day Gaziantep province of Turkey.

Zeugma was named for its bridge of boats that enabled passage across the Euphrates. In Greek, zeugma literally means bridge or bond. The city reached its heights of affluence during the period of Roman rule, which commenced in 64 AD. In AD 256, the city was conquered and destroyed by King Shapur I of the Persian Empire.

The mosaic is now on display at the Gaziantep Museum of Archaeology. The original photograph was taken there by Nevit Dilman and is now in the public domain.

The zeugma princess

The Typography

Type

The typeface used on this site is Function Pro, which is a redrawing of the Futura typeface designed by Paul Renner in 1927.

Renner believed that modern typefaces should not be based on old designs. He took letter-forms down to the bare essentials, and built Futura with simple geometric shapes, such as the circle, the square, and the triangle. The result was a very modern-looking sans-serif, that, with the help of the Bauer Type Foundry of Frankfurt, Germany, became an enormous success.

Layout

The layout for this site is based upon the principles taught by Josef Müller-Brockmann and Robert Bringhurst, including the principles of vertical and horizontal rhythm. Vertical rhythm is based on a line height of 26 pixels, giving a generous leading which complements the short x-height of the typeface, allowing the text to breathe.

Horizontal rhythm is set using a ten-column grid. However, two superimposed columns form the structure of most pages: one for text and another for buttons and other supplementary material. The width of the measure is set to 7 columns, or 620 pixels, wide, which gives a line of about 80 to 90 characters. While this is a bit on the wide side, the generous leading and a white line between paragraphs help keep the eye on track.

The layout is responsive to the size of device or browser window that is currently being used to view the web page. Four sizes are supported: mobile, mobile landscape, tablet, and desktop. An open-source project called the Less Framework, by Finnish designer Joni Korpi, was used as the basis for this functionality.

Ten-column grid

The Scripts

Even though a traditional book does not run JavaScript, modern websites do, so it’s fitting that we attribute the many developers that have added to the functionality of this site. It would not be the same without their contributions.

  • MediaElement.js, an HTML5 video and audio player, with fallbacks for older browsers.
  • jQuery, a foundational JavaScript library, used for compatibility with older browsers.
  • jquery-smooth-scroll, a jQuery plugin that handles all of the in-page smooth scrolling.
  • Lettering.js, a jQuery plugin that helps kern some of the misbehaving section titles.
  • AccessifyHTML5, a simple polyfill that adds ARIA attributes to the web pages to make this site more accessible to persons with disabilities.
  • Emphasis, for dynamic deep-linking and highlighting, by the New York Times.