users to information through typographic links becomes of greatest importance. The treatment
of these links—their size, location, style, and color—requires extra consideration to easily
distinguish them from primary content. Complicating matters is the need to let the user know
where in the site they are once they have left one area to visit another. Again, intelligent
placement and styling of typographic links will help establish a visual record of the user’s path
from location to location. Third, the flexibility requirement of a site—for continuously
updated content—means the designer must consider the structure of the page screens to
accommodate information that will be changing on a regular basis. Added to this the variability
of the browser window—and, therefore, the actual shape of the format—along with coarse
screen resolution and the impact of inserted graphics on loading times, and it becomes clear
how involved the typographic complications may become.
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:000000 D/O : 00.00.01 Co: CM0)
p149
Text Black
Y
Describe your approach to typography in general.
Typography is an integral part of our work, and we are pretty obsessed with getting it right.We like to infuse each typographic approach with a strong conceptual underpinning and execute it as simply and cleanly as pos- sible.We trim off all the fat.
What is important to you (typographically) when you design a website? Type and the Web were not cut from
the same cloth.We try to get the typographic content to be clear and to focus on the hierarchy of information. Screen limitations are the baseline consideration when creating type on the Web. We keep the critical top-level information as edited as possible and embed graphic pieces to keep the resolution of the letterforms intact. These graphic pieces of typography hold together the various support levels of text that work best in HTML.
Equally important are a carefully constructed site architecture, informational hierarchy, and effective use of visual clues for clear wayfinding. The typography must hold its own as one of the critical means of communicating content efficiently. It is best if the visitor to our sites is unaware of the navigation.
Talk about the typography in the cashmere.com site, from a conceptual as well as functional standpoint.
When we developed the cashmere.com logo we wanted to give reference to the style of a classic “luxury” brand while creating an entirely new identity. The logo itself gets playful with the interlocking Cs and the “floating dot” (referring to dot com).We wanted to keep the site as welcoming as possible. Our typeface choice for the logo- type, set in FLING, is both elegant and friendly.The logotype was designed to work with both solid and photographic backdrops.The photographic backgrounds change seasonally on the home page while the section header solid colors remain constant. Short introductions were written for the home page as well as for each section opener page. These are built as graphic pieces and embedded.
How did you make decisions to use graphic type versus system text in various places in the site? We wanted
to make the site as clean as possible throughout, while at the same time easily editable by our client. This deter- mined what areas needed to be HTMLand the components
that were small enough and never would change to be designed as embedded graphic pieces.
How do you feel about rules in typography? I don't
believe in rules when it comes to design. If the designer's intuition translates with grace, the end result should work. Personally, however, I have an issue when it comes to combining capitals and small capitals. I have yet to see this work well. The beauty of illuminated letters and introductory drop caps seems to have been lost with computer-generated solutions.
What are your favorite typefaces and why? I’ve never
really thought about it... I suppose I gravitate toward two categories: bold and organic. My personal favorites, however, are irrelevant: each project demands what is appropriate. My palette generally draws from the classics: Univers Condensed, Letter Gothic, Bodoni, Mrs. Eaves. I adore the Emigre collection. I generally dive into whatever best reflects the problem at hand, whatever feels right.
t
y
Denise Korn is principal of Korn Design in Boston, Massachusetts. Her multidisciplinary firm undertakes commissions in identity, advertising, and communications, as well as website design, for a broad range of corporate and cultural clients in the entertainment, retail, and hospitality industries. The firm’s work is heavily typographic and infuses solid information design with humor and distinction.
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p150 Text Black Typography Workbook 150 151 Job no: Scn : #1 Dept : D
A promotional page offers a large image of current project work and a direct entry to the portfolio section through the hor- izontal band of navigational but- tons toward the bottom of the
frame. A sober gothic sans serif, set upper- and lowercase carries a general introductory message in the site’s pink branding color, while bitmapped subheads and dot grids continue the textural
contrasts established in the site’s primary navigational area at the left side of the browser format.
www.rocholl-projects.de
A straightforward hierarchical structure characterizes this website for a design firm. The page is divided into a narrow column at the left, for high-level navigation, and a wider column at the right for changing content. The display typography is set in a neutral sans serif, colored a vivid fuchsia. A set of characters at the left, in the navi- gational column, is interactive; clicking on a number calls up specific content in the wide column. The column is defined by a geometric shape, and within, a strong hierarchy among informational components is achieved alternately with a simple quadrant grid, or by a set of proportional spaces. In the portfolio section, for example, a white rectangular area distinguishes the text from the image area and navigational buttons. Type within this area follows its own internal hierarchy—the project title is set uppercase and slightly spaced to improve character recognition; the text is slightly smaller. The hierarchy changes in promotional areas; images occupy the upper spatial unit and text is set below in the display type but in lowercase. The site is compact, clean, and allows its typography to be almost strictly functional. A cool, neutral palette combined with saturated display type keeps the site fresh despite its rigidly simple structure.
Rocholl Projects/KearneyRocholl Frank Rocholl,
Heiko Gimbel|Frankfurt, Germany
Typography in Practice Website Design
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p151
Text Black
The homepage is a spare, elegant composition of contrasts. Each element’s weight, color, and posi- tion seem carefully considered, which creates an interesting tension between calmness and coldness. The mysterious, hard- edged geometric forms are softened by transparency, and
they have the quality of letter- forms but do not seem to be letters. The company name, repeated as a texture, helps calm the effect of its shocking pink color. This texture is repeated as a grid of dots surrounding the large navigational type toward the left edge of the page format.
Clear, simple contrasts between text styles and colors are enlivened by textural graphic elements. The image and type occupy clear zones, and this structure distin- guishes this particular area from others within the site. Each navi- gable area has its own structure.
The horizontal structure of the portfolio section (below) contrasts with the quadrant structure of the news section (below right); each is well suited to its contents and uses a different typographic link style that is also appropriate to its respective information.
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p152 Text Black Typography Workbook 152 153 Job no: Scn : #1 Dept : D
An opening animation (top right) presents the studio’s positioning statement. The conjunction “with” connects the two concep- tual words—connect and clarity— before being replaced by a thin vertical rule that expands to form the site’s structure, two square fields that carry distinct infor- mation (middle right).
In the portfolio section (bottom), project images load upon click- ing animated buttons in the left field. The portfolio subsec- tion—print, identity, or Web design—is indicated by an infor- mational marker at the upper right of the left-hand field, point- ing directly to the content field at the right. Internal navigation and text-based tool tips help the user sort through projects.
www.aajdesign.com
The structure of this clear, elegant website for a design consulting firm showcases the studio’s sensible, yet expressive, approach to information display. The site loads with a short animation of the firm’s positioning state- ment—Connect with Clarity—set in a light-weight sans serif. The syntactic juncture between the two words connect and clarity becomes a dividing line that expands into a two-square configuration of colored fields, each containing specific information. The left square contains the firm’s logotype and an informational marker that acts as a title for the content that appears in the right- hand square. The site navigation rests below the left-hand square, and a simple rollover expands the A-levels to reveal subpage links for appropriate sections—for exam- ple, the portfolio pages. Content on the right side scrolls inside the lightly tinted square. Informational type, in the form of captions and rollover tool tips, helps guide the user through portfolio and other content. A single weight and size of system text interacts quietly with navigational buttons.
Allemann, Almquist+Jones Hans-U. Allemann and
Jan C. Almquist (art direction, design), Sal Nistico (design)|
Philadelphia (PA), USA
Typography in Practice Website Design
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p153
Text Black
www.bernhardtdesign.com
Product lines, finishes, specifications, and showroom information are cleverly combined in this simple, clean website for a furniture manufacturer. Structured on a 7 x 7 modular grid, the site uses this structure to maximum effect, organizing wildly varied information and images in a unified and easily navigable layout. The typography in the site is kept spare and informational to let the products take center stage, as well as to make the navigation as clear and accessible as possible. The navigation is accessed in drop-down menus that extend from the red navigation bar at the top of the screen. A highlight of the text indi- cates the active nature of the link on rollover; the type’s change of color on rollover indicates a change of hierar- chical importance, from listed item to selected item. Each page presents its respective information in a clear hierarchy, using only one typeface—the system sans serif—in two weights (and mostly one size) to distinguish informational components.When appropriate—section markers, for example—a graphic with type is used, rather than system text, for greater quality. In these cases, a sans serif with similar formal qualities to that of the brand’s serif face is used. Bold type is used for section or paragraph heads, and for product names. Each kind of informational com- ponent has a home position on the grid to help the user locate it quickly. The section marker, for example, is always flush left in the left-most column, at the hangline that governs the text throughout the site. Images conform to the underlying grid, and occupy one, two, three, or more modules as needed.
Piscatello Design Centre Rocco Piscatello|
New York City (NY), USA
Aside from a large product image, the homepage contains only the client’s branding— an uppercase modern serif, loosely spaced—and a red bar containing the A-level naviga- tion categories. The vertical red rule separating the client name from the word “design” aligns these elements to the grid and defines the location and measure of the columns.
The flexible, modular grid organizes information in differ- ent ways. The contact page shows the grid used to create a two-column structure, with overall regions listed in the left column, and individual contact information for locations within a specific region in the right column. The drop-down navigation above takes up a minimum of space. Product names are set in a larger size in red. The product’s specs follow the name, pulled out
of the descriptive paragraph for at-a-glance accessibility. Within the specs, bold weight is used to highlight important information.
The site also includes biogra- phies about the company’s furniture and textile designers. The wide left margin helps distinguish this section from the others; the section marker at the left occupies the same home position to aid the reader.
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:000000 D/O : 00.00.01 Co: CM0)
p154 Text Black Typography Workbook 154 155 Job no: Scn : #1 Dept : D
www.jonkrause.com
This promotional site for an illustrator uses detailed typo- graphic navigation systems to organize and display the artist’s work. Against a photographic backdrop of a warm, textured watercolor paper, simple slab serif type reverses out to white for clarity. The pages are divided into areas for project images, along with a title and publication venue; an area to the right for support information or navigation through multipart projects; and global naviga- tion buttons at the far right of the screen. The main dis- play area also houses biographical information, a catalog of the illustrator’s awards, and other content. Portfolio pages display a selected project in conjunction with sup- port information and secondary navigation. The viewer
has the option of accessing a personal account of the con- ceptual and work process from the illustrator by clicking one of the mood icons to the right of the project image. This text appears in a more prominent location, size, and weight than the title and publication information directly under the project, allowing it to occupy a greater level of importance in the hierarchy. In the Awards section, each year’s awards are cataloged in a series of book pages with pullout tabs that the viewer can use to select a given award received in a given year by the illustrator.
Red Canoe Deb Koch, Caroline Kavanagh (design); Deb
Koch, Benjamin Kaubisch (developers) |Deer Lodge (TN), USA
Typography in Practice Website Design
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p155
Text Black
The homepage is regularly updated with bold exhibition announcements. The art for the typography scrolls behind the navigational device via dHTMLto reveal current gallery exhibitions.
Artwork and text remain distinct from the navigational device. An HTMLform drop-down menu above the work lets the user navigate among different exhibitions, while a text link below the work connects to information about the artist.
www.roemerapotheke.ch
Clean, white pages with simple, yet visually strong, navigation create an easily navigable experience through this site for an art gallery converted from a pharmacy. The history of the facility is acknowledged in the orange cross configuration of the navigational device, which remains in a fixed position as the user scrolls through the site’s content. Large-scale titling typography, in a bold- weight sans serif, calls out exhibition information; the remainder of the site’s typography is sans serif system text. Linear graphic elements, along with the geometric cross, convey a feeling of pharmaceutical packaging.
Atelier Varga Mihaly Varga, Yves Gerteis|Zürich, Switzerland
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:000000 D/O : 00.00.01 Co: CM0)
p156 Text Black Job no: Scn : #1 Dept : D Typography Workbook
The homepage partially defines the primary page structure; the central content zone is clearly distinguished from background and navigation by conspicuously being loaded into a white frame, with the tiered navigation to the left. Unlike the subpages, the homepage does not display the support column to the right of the central zone, but it does include a gray frame below the introduction containing infor- mation that may be updated by the organization. Flyout menus may be accessed from the second tier of color-coded navigation buttons.
www.fpaa.org
This website for the Fairmount Park Art Association, a nonprofit group dedicated to public art awareness and urban planning in Philadelphia, is structured using a clearly proportioned hierarchic grid. A primary central content zone is flanked on the left by by a narrow column containing a tiered system of navigational buttons; a second narrow column area provides space for supporting imagery and captions. The navigational buttons are color coded into two major sections—links to information about the organization are a warm neutral gray, while links to information about public art are colored a pale bluish gray.The color distinction is subtle, but decisive. Navigation through the second tier of buttons is accessed through flyout menus that provide links to more complex areas in the site.
Within subpages, the central content zone and the support column at right may be spanned by images, but running text is constrained to the central zone. Captions for image groupings appear in the support column.The organization’s branding typography, in a crisp serif face that is both classical and modern, is supported within a maroon tab by a secondary line of type, set all uppercase in a sans serif face. Directly below the tab, a horizontal green ban- ner holds the section header for a given page—About Us, Public Art, and so on. The remaining typography is sans serif system text, used in both regular and bold weights, predominantly in one size. The text size for captions is somewhat smaller, and links within text or captions are underlined in the maroon branding color.
The site offers an interactive map of the local area that allows the user to locate and view specific works of public art, zoom into the map’s areas, and call up historical and cultural information about selected works. The map is delicately drawn and subtly colored so that the features it portrays do not compete with red dot locators of specific artworks. On rolling over, the name of the work appears over the cursor. Upon clicking the dot, an image and infor- mation about the selected workloads into a column to the right of the map, mirroring the logic and structure of the primary portion of the site. Clear hierarchic distinctions and a simple structural system act in tandem with intuitive navigational devices like rollovers to help guide the user easily through a complex set of content.
Allemann, Almquist+Jones Jan C. Almquist (art direction),
Sal Nistico (design)|Philadelphia (PA), USA
156 157
Typography in Practice Website Design
15 15
Job no:80872 Title : RP-Typography Workbook Client : Pro-Vision Scn : #175 Size : 228.6(w)228.6(h)mm Co : M15 C0 O/P: CTP Dept : DTP D/O : 08.04.04(Job no:80872c3 D/O : 14.6.04 Co: CM11)
p157 Text Black