Designing Fictions, Part 1: Typography
Lately, I’ve found some time during my vacation to design my fictions homepage. And in the process, I started thinking that maybe I should share my design/development process, because there’s always something to learn from someone else’s process. I’m hoping that someone out there will find my process interesting, maybe even intriguing. Because designing a personal homepage is different from building a commercial application – the priorities are different, the timelines are different, and the motivations are different.
I’ve since broken down my process into several stages as below. Feel free to skip to the sections that interest you if you don’t care to read them all:
- Thoughtful HTML & Content Structure
- Designing in the Browser
- Scripting & Animations
- Accessibility Testing
First things first: Typography
I’m a believer in the merits of using typography as a base for web design. What’s more, because the fictions homepage primarily serves as a landing page for my fictional works, text and typography necessarily becomes the focus. Also, with a typical web application, the focus is always less on the typography than on the grid – one can use Bootstrap without giving a hoot about the typography and still deliver a decent looking web app. Since this is a personal project, I see it as a good chance to approach design differently, typography first.
Georgia and Arial.
Choosing the right fonts is surprisingly easy in this case. Since it’s a single page, there’s little reason to put the burden of loading an entire font family on the user just to make things look good. Georgia and Arial are the default fonts served by all Windows and Mac machines, and don’t require users to load new fonts. And since everyone is using web fonts these days, going back to Georgia and Arial can actually make things look fresh.
Leading / Line-height
Determining the leading is necessary because it sets the vertical rhythm and makes it easier on the eyes. In my case, I first wanted to start out with a base font size. Because there are less paragraphs on my page than headers, I decided that I will not go with the default 16px/1em on browsers, and decided to go with 18px/1.125rem instead. As for the line-height, I picked a number from my modular scale that looks right: 1.235. As thus the leading for my homepage will be 1.125rem x 1.235 = 1.389375rem, or 18px x 1.235 = 22.23px.
Px, Em or Rem?
There seems to be an increasing number of people who advocate not using Rem or Em in favor of Px. I personally prefer the use of Rem, because it respects the user’s font size settings and makes calculation simpler for me. Unless I need to establish a relationship between say, a header and its corresponding paragraph, I prefer to take out the complexity of cascading styles and use Rem in favor of em.
Mix n’ Match
I’m in no way a typography geek, so most of the time I simply rely on my instincts. If I feel two fonts go well together, then I’ll use them. There’s no exact science involved whatsoever. The recommendations on Typekit help somewhat, but in this case, since I’m using Georgia and Arial, I simply relied on my instincts. I do know, however, that I want to use sans serif for the headers and serif for the text, so the experimenting started from there.
Big Types, Small Types
I did not want my synopsis paragraphs to stand out too much, because I want users to focus less on the synopses of the fictions and more on actually reading them. So I had my <p>s and <span>s at the base font size of 1.125rem/ 18px. The font sizes of the other elements are decided somewhat arbitrary, using the leading as a foundation. The <h2> headers, for example, have font sizes that are 4x that of the base font size, while the titles of the works have font sizes at 2x the base. These decisions are based on the relative importance of the elements, as well as whether they ‘look right’. If the <h2>s didn’t look right at the font size of 4x the base, for example, I’d have drop it to 3x, or maybe some other value, while taking care to keep the leading consistent.
Next Up: Content Hierarchy
After the foundation, i.e. the typography has been set, the next step will be defining the content structure, since the relative importance of each content block affects how it is laid out. More importantly, knowing the content hierarchy helps in the writing of semantic HTML code, which is extremely important for users who are visually challenged. In my next post, I’ll explain my process of writing thoughtful, appropriate HTML for the content.