A Lesson On Web Typography With Adobe
This post was written by Nicole Ajamian, a Fresh Tilled Soil Apprentice, in response to Challenge 2: Web Typography.
Main Goals: While looking around the web for inspiration, I stumbled upon Adobe’s blog. The typography is surprisingly bland for such a design oriented software company, so I decided it would be a perfect candidate to re-vamp. My main goal was to create a modern and stable yet elegant feel for the typographic system, so that it would be friendly and engaging to readers. I also wanted to make sure it was harmonizing with Adobe’s branding in terms of style and functionality.
Typefaces: For the headers, I chose a sans-serif Gothic font which is great for demonstrating boldness and strength. Its condensed nature and subtle details in lowercase create a modern yet stable headline. In contrast, I picked a body font which fills out horizontally rather than vertically. I was drawn to elegant details such as the curls of the l, t, and u, which do not attract from readability, but in fact create lines which draw the reader across.
Font Characteristics: To determine the font sizing, spacing and leading, I kept in mind the golden ratio and worked from there. Usually it’s a good idea to slightly alter that golden ratio with your font size since not all fonts appear perfectly balanced with that technique. I used this as a baseline to tweak until finding a system that seemed pleasing and balanced, as well as legible. For this stage, I checked out A List Apart’s article called “More Meaningful Typography” for some background on the golden ratio.
Final Thoughts & Lessons: Key takeaways regarding typographic systems are this: 1) Make sure to strike a good balance between the heading font and body font (usually sans-serif for body is more legible, and you can go a bit more creative with the headings); 2) When in doubt, bigger and bolder is better (when the key role of typography is legibility, that’s most important to keep in mind); 3) The golden rule isn’t always so golden – every situation is different, so design for it!