Although I went through all the articles listed, some of them influenced me more and helped me to get a direction for the style tile for Spruce Street Harbor Park website. With a couple of years of work experience in hand, I normally don’t struggle with color combination however typography is something that I always find hard to decide. Playing around with handful of typefaces, I always ended up using Helvetica Neue for title and Arial for body text because those were the most widely used typeface and always felt right to me, which is actually not true. For me, Helvetica Neue was a trap; I could not go beyond that typeface. Similarly, I normally wouldn’t mix different typefaces because I was not confident they will compliment each other.
Typography
The Smashing Magazine article – “What Font Should I Use?”: Five Principles for Choosing and Using Typefaces, was very informative and simple to understand. I will definitely be using the principles while choosing typeface for Harbor Park style tile. Although I have not yet decided which typeface I will go with, but there are few things I will surely keep in mind.
Below is the summary of 5 categories of typeface that will help me decide which ones to go with:
- Geometric Sans
- Less is more
- Stroke of same width
- Pros – Clear, Objective, Modern, Universal
- Cons – Cold, Impersonal, Boring
- Humanist Sans
- Derived from handwriting
- More detail, less consistency
- Thinner and thicker stroke weights
- Pros – Modern yet human feel, Clear yet Empathetic
- Cons – Lacking in strength of character or purpose, Fake
- Old Style
- Oldest typeface (result of centuries of incremental development)
- Little contrast between thick and thin strokes
- Pros – Classic, Traditional, Readable
- Cons – Class, Traditional (When you don’t want it that way)
- Transitional and Modern
- These typefaces emerged as type designers experimented with making more geometric, sharp and virtuosic typeface.
- Competition between 2 rival designers, Bodoni and Didot
- Contrasting thick and thin strokes
- Pros – Strong, Stylish, Dynamic
- Cons – Neither here nor there
- Slab Serif
- Wild card (became popular in recent years)
- Stroke like those of sans faces but with rectangular shoes stuck on the end
- Convey a sense of Authority (heavy version) yet Friendly (light version)
- Recall American Frontier and kind of rural, vernacular signage
Based on the above summary, I will probably go with a clean Sans-Serif title and similar stroke width Serif for the body text.
As the article suggests, other than the categorization of typefaces, there are other things that should be considered:
Some typeface work well with almost everything
Just like there are some clothes in our closet that work almost well with everything and every occasion, some typefaces are similar – they are universally accepted, neutral and work well in most cases. As I mentioned in the beginning of the post, for me, Helvetica Neue was that universal typeface.
Keep it exactly the same, or change it a lot (Correspondence and Contrast)
People won’t notice slight differences in typeface; it will make them think whether they are same or not. The statement “Opposite attract” holds true in case of typography too. It makes the combination aesthetically interesting and compliment each other. I will definitely use Contrast typeface in Harbor Park website as the website design itself will probably be neutral. So, a nice typography will enhance the aesthetic value of the design.
Another thing I learned from the article is how to match this combination. Not every random typefaces will look good when paired together. For the Harbor Park website, I’ll consider the following:
- Avoid 2 different typefaces from within one of the 5 categories listed above.
- They should have 1 thing in common, either visual (similar x-height or stroke weight) or it can be chronological (from same period of time or by same designer).
- A little can go a long way – not overusing the contrast or else it will look very busy.
Color Theory
Choosing primary color is one of the toughest decisions, specially when you don’t have any style guide or branding document to follow. As we all know, each color represents different mood, culture, target audience, etc. But often beginner designers tend to select colors they like rather than what the website is demanding.
Personally, I start selecting primary color based on the adjectives that define the website’s mood and content. Although I’m not yet sure about final color palettes but Harbor Park’s feel like “Environment”, “Water”, “Community” is demanding, in my opinion, for color like Blue, Aqua green, light Gray, etc. and the other color will be decided utilizing different color models, most probably Analogous or Split-Complementary.
Texture and Image
Texture and Image will play a major role in how the website will feel. Sometimes it is obvious and sometimes it is hard to determine what texture will feel right for a website. For e.g. Interior of Kraftwork Bar is exposed bricks, pipes, metal and wooden table, chair, serving boards, etc. So it is kind of obvious that the texture will be somewhat grunge and/or wooden. Another important element is imagery. Harbor park, being a fresh feeling outdoor spot, clean and colorful images will be compatible with the website design.
Pen and Paper 