An independent archive of typography.
Topics
Formats
Typefaces

Amsterdam Canals website

Contributed by Matthijs Sluiter on Jan 2nd, 2021. Artwork published in .
Amsterdam Canals website 1
Source: canals-amsterdam.nl License: All Rights Reserved.

CANALS is four part editorial journey, telling the story of the history, development and expansion of the iconic Amsterdam canals. It explores the early beginnings of the city, through the 17th-century until today.

The website, an initiative of designers Marcus Brown (Amsterdam) and Aristide Benoist (Malaga), uses the history of Amsterdam’s channels for an exercise in web-based storytelling. All elements of magazine design come along: a storyline that is followed while browsing (like in a magazine, scrolling horizontally); punctuated with visually impressive section openings, drop caps text columns, an alternation and repetition of image, headings and text. The color palette follows the Amsterdam coat of arms (red, white and black), with additional color provided by archive images.

The star of the design is Kris Sowersby’s Maelstrom Sans: a design with extreme contrast as its main ingredient, juxtaposing anything it is paired with, legible only in short words – and used just so, to great effect. To aid legibility, words set in Maelstrom are tracked. At the other end of the typographic spectrum is Commercial Type’s Graphik which, set in small size for columns of body text, ensures calmness and regularity.

In between these two, the designers use three condensed fonts for headlines, streamers, drop caps: Coign (Colophon) is a collection of condensed sans serifs. The website uses 37B (one of the less narrow styles), always in capitals. Grifinito, the compressed sibling to R-Typography’s Griffo and Griffito is used mainly for streamers. From chapter two, Caslon Graphique Compress D appears once per section. The Compress style is included with the URW version of Caslon Graphique (Red Rooster has a similar but lighter style as Caslon Extra Condensed).

Amsterdam Canals website 2
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 3
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 4
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 5
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 6
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 7
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 8
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 9
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 10
Source: canals-amsterdam.nl License: All Rights Reserved.
Amsterdam Canals website 11
Source: canals-amsterdam.nl License: All Rights Reserved.

Post a comment