Pine Orchard Prints typographic identity

Logotype and typography for a small online retail shop.

This project was originally completed . Licensed © copyright.

This writing was last updated 2016-03-25.

Pine Orchard Antique Prints is an online-only print shop that I designed and developed for a client.

Typography set the tone for my design work on the Pine Orchard Antique Prints shop. I established the typography early in the design of the website, to strongly differentiate the shop with distinguished heading styles implemented with restraint. For the identity I drew inspiration from the descriptive text that accompanies these nineteenth century prints.

Inspiration

I avoided the more eclectic Victorian typographic styles which might be illegible on this particular website. For the same reason, I eschewed excessive contrast, outlined text, centered layouts, and overly decorative typefaces. Reviewing text samples in books and prints from the shop’s catalog, I found these styles could be emulated and adapted for use.

All caps text for a title page

William Alexander, Costume of China, 1814

Serif text description for a print

William Pate, American Landscape, 1869

I sought a typeface that could serve equally well in a display or body context. It would have to be a distinctive serif font – traditional but still able to sit comfortably next to modern user interface typefaces (such as Avenir or Roboto). To maintain a higher level of performance for the site, I limited my design to only one regular weight and one style. A single font additionally served as an artificial but useful constraint. This constraint led to creatively addressing emphasized forms: small capitals could mitigate the lack of bold or italic styles and more effectively evoke the type of that era.

Choosing Cardo

I chose Cardo, an old-style font by David Perry based on the Renaissance-era Bembo. It helped that the typeface was freely distributed through an open source license. I could try it out extensively in development before committing. 1

The typeface performed quite well, even with only a single weight. Cardo has excellent OpenType support and beautiful small capital styles, making headings and featured text stand out against the striking photos of the prints. I ended up using Cardo for all of the headings on the site, as well as for stylized collection links and for the logo identity. Using small capitals for titles, and ultimately for the logotype ended up being a stylistic success.

Close view of the letter forms for Pine in the logo.

In my earliest take on the design, I attempted a logo designed only with CSS, but limited control over letter spacing and relative proportions led to unimpressive initial efforts. It is still difficult to implement small caps with OpenType and CSS properly, since browser support is not as extensive as it could be. 2 I designed the next takes of the logotype with Adobe Illustrator, because I wanted SVG output and fine control over kerning. The final iteration appears on the site header as well as in transactional email messages and mailing labels.

For a small shop, memorable and appropriate typography effectively served the business goals and provided a strong identity. Using a straightforward logotype supported the typographic style of the site and evoked the visual appeal of the items in the shop, without relying on symbols or iconography.

A list of collections using Cardo with small caps
The title text in Cardo for a print
Pine Orchard Antique Prints banner logo as a part of the banner on the shop

The typography in context on the Pine Orchard Prints website.


Read more about the entire project

  1. Cardo is available for free through Google Fonts, but I chose to serve it through an Adobe TypeKit subscription because of their superior OpenType support. 

  2. Even Safari 9.0 for OS X and iOS does not have support for it at the time of this writing, but 9.1 will! Following the principle of progressive enhancement and not relying too heavily on the small caps style meant that I could get away without optimizing for Safari in this case. The logotype, however, uses SVG outlines to ensure that it renders consistently across browsers.