For example, the “Overview” section is thinner and shorter, allowing the deeper “History” content on the right more space. Layout decisions came directly from the needs of the content.
Starting with a comfortable, mid-sized viewport (around 1200px wide), I tried to push DIN into a more radical tone, with asymmetry and interesting whitespace. I tried to build a composition that was dynamic and felt as bold as the typeface itself. But to make it interesting, I ditched any gutters so the basic unit of the grid, the column, is given more exposure in the layout. To me, this sounded like a standard we’ve had in the web industry for a while: the 12-column grid. In consideration of DIN’s historical relationship to standardization, I knew I wanted to build this layout on one uniform grid, which necessitates more columns to inject variety into the composition. I felt this created a stronger connection between type and layout. I tweaked this font size at various viewport widths to align it with the grid, rather than using ems to relate it to the other font sizes. The one exception is the headline, “DIN Condensed Web”, which I set with the viewport width (vw) unit. The lead-in text is 1.5em, while the body copy is 1em. The historical relationship to “standards” made me think of uniformity and simple mathematics, so to honor this, I kept the the size and spacing of the text to increments of 0.5em. Given the heaviness of DIN, I had to set a base font size of 20px to make it readable for copy, and gave it a generous line-height. DIN Condensed Web, cut by ParaType and delivered through Typekit, again deftly adapts these classic letterforms for a new context. DIN 1451 was most famously used on German road signage for decades, and in the 90s it gained a broader popularity due to being one of the first quality sans-serifs released in the PostScript format. The first incarnations of DIN were originally designed in 1931 for the Deutsches Institut für Normung, the German standards organization. Note: on each layout you can hit Cmd + G in OSX, or Ctrl + G in Windows to see an overlay of the grid system. To explore these questions, I’ll walk through my process for building fluid compositions that reflect the characteristics of a typeface, using three exceptional web fonts from Typekit as examples: DIN Condensed Web, JAF Herb, and Chaparral Pro. But how does a type-centered approach to layout look on the web? And how does such a process work with the fluidity of the web to produce unique, engaging compositions at any viewport size? From there, layout and other design considerations can take their cues from the content itself. I like to start with type when exploring the aesthetics of a project.
0 kommentar(er)
