Skip over navigation

Seattle Web Design and Web Development

by Neal Krouse

Constellation Brand-building Marketing Communications Web design

Constellation home page Constellation For Sale or about us page Constellation experience page Close up of the hyphenation algorithm

  • Constellation is a brand management and marketing communications company. Jeff DeJoseph, the founder of Constellation, wanted a web design that was simple, black and white with a simple accent color.

    The simple design is misleading, the site uses advanced CSS and JavaScript programing to render a beautiful and minimal design.

  • The site is a uses a classical approach to typography. Adrian Frutiger’s typeface Avenir is used for the logo, navigation and main heading (H1 tag).

    Rendering Avenir on the page uses Cufón, a JavaScript framework that uses SVG, Canvas, and VML. No plugins are required and no image replacement techniques are needed. The typeface renders in all major browsers, including Microsoft’s Internet Explorer 6.

  • The paragraphs in the main body text use a justified typesetting. This is difficult task because user agents render words without any hyphenation.

    I used a JavaScript library which inserts soft hyphens in every word, so the paragraphs have hyphenation. This creates beautiful and easy to read typography. There are no rivers in the text, only consistent spaces between words.

  • Pictured above is a close up of the hyphenation in the paragraphs. Even if you zoom in to make the text larger and easier to read, the words hyphenate and create a uniform word spacing.

    Another detail is abbreviations of three characters and more are slightly smaller and spaced out. This creates even coloring in the paragraph.