Like many designers, I’m a big fan of whitespace. Where some folks might see emptiness and nothingness, I see atmosphere and elegance. When used properly, whitespace can add so much to a design, by spacing out the various elements and giving them room to breathe and do what they need to do — which results in a design that is more pleasing to the eye, easier to understand and navigate, and less overwhelming, even if that registers only on a subconscious level.
I’m also a sucker for good typography: for the pleasing arrangement of letters and the spaces between them, for the right use of right typefaces for the right jobs, for the use of type in lieu of “normal” design elements to communicate in ways beyond the actual words used.
Unfortunately, while it’s fairly easy to manipulate and master whitespace in web design, typography is trickier. Much of that is due to the limitations of the medium; at best, CSS gives designers only the most rudimentary typographic control. We’re basically limited to things such as font size, font weight, style, line-height, and letter-spacing.
Future versions of CSS promise more typographic control, but widespread support is still a ways off. So we’re basically stuck with rudimentary typography on websites, that is unless we want to use images for everything. (But there are so many things wrong with that approach, I won’t list them here.)
So what does all of this have to do with Astheria, Kyle Meyer’s website? Well, put simply, his site shows a stunning mastery of both whitespace and typography.
The whitespace is pretty obvious. Meyer gives the elements on his site — headlines, entry text, logo — plenty of room to breathe. And while there a few inconsistencies in his design’s grid, the grid layout nevertheless is so sharp, you could slice bread with it. His design isn’t centered, but between the gracious whitespace on the left and the very subtle background on the right, you’d never know it. Everything is nicely framed, but the framing and layout aren’t obvious or heavyhanded.
The only place where things get a little awkward is the Archives page (see above). The archives are sorted by month and year, and the spacing between the individual headlines represents the amount of time elapsed between their postings. Which sounds really cool in theory, but visually, it’s unbalanced and uneven, and a little odd compared to how rigid and composed everything else in the layout is.
As far as typography goes, he uses the ultra-big lettering that’s become something of the rage these days, but the mixing and matching of weights keeps the larger headlines from being overbearing. Furthermore, subheadlines keep the entries balanced. And a judicious use of color — I’m not normally a fan of pink, but it works well here — adds just enough of a splash to keep the white and grey from becoming too mundane.
Meyer writes a lot about typography and design — his articles on portfolio designs were especially convicting for me — and so it’s obvious that he practices what he preaches. All in all, this is a design that I love looking at, but what’s more, it challenges me to make sure that my designs are as elegant and refined as possible — be it in the whitespace, typography, or anything else.
Welcome to Opus. My name’s Jason Morehead and I’ve been blogging for 20+ years. To date, I’ve posted 4,107 articles on numerous topics including music, movies, anime, pop culture, web development, technology, and religion.
If you enjoy reading Opus and want to ensure its continued existence, become a supporter today. Contributions help offset the costs of hosting and maintaining the site.