Post 3: Harold’s Doughnuts


The doughnut craze is hitting Columbia, and I’ll admit that I’m not complaining. Here’s a look into one of Columbia’s newest additions: Harold’s Doughnuts.

Screen Shot 2015-02-18 at 9.42.19 PM

We’re going to talk about typography today, but before we get to that, I just want to mention the genius use of imagery for Harold’s website. Including a doughnut on the home page of the website is a great way to get the company’s message and objective across to the viewer. It’s simple, but it tells a complex story.

Now, on to the typography. The font of the homepage is in Bebas Neue. It’s a modern, sans-serif font, and it’s impactful. The entire website uses uppercase letters only, and this allows the content of the website to stand out to the user.

The Bebas Neue font sets an entertaining, humorous tone for me. It’s serious, but it’s also quirky. When I looked at the main font, I felt that this company knew what it was doing and was having a good time doing it. If I had visited this website and didn’t know what Harold’s was, I would’ve been convinced to find a Harold’s after viewing the site.

Additionally, the type makes the company credible. The font makes the company seem innovative, quirky and artisanal. Luckily for Harold’s, it’s able to live up to the image it portrays.

I noticed that the text of the site isn’t the main feature. It’s about the doughnuts, and this makes sense since this is their product.

On the homepage, the text is on the top of the page. The picture of the doughnut takes up the majority of the page, and this is obviously intentional. This placement of the text shows that the company has a method for viewers to help them understand the product.

The “Blog” button is the only button on the homepage that is surrounded by an orange circle. This is an interesting feature of the site. It’s one way to bring viewers into the cultural aspects and news events of the company. The blog integrates news and product information, and it gives the viewer a complete view of the company and its products.

Also, the typography style of the blog and the other body text on the site is interesting. The website continues its use of uppercase style, but for these aspects of the site, the font plays against them.

Screen Shot 2015-02-18 at 9.52.02 PM

The blog and body text font are Proxima Nova. It’s a sans-serif, block text that pairs well with the use of Bebas Neue. However, it’s a little overwhelming when it’s seen in a scroll. The words blend together, and it’s difficult to understand sentence structure when there’s a large paragraph of the text.

It adds to the style and culture of the website. The text shows that Harold’s is willing to break boundaries and think outside the box. There aren’t many websites that include uppercase-only text. For me, this shows the company as risky and creative. The viewer gets the sense that this company is outrageous in its culture, and that adds a positive effect for the company, especially in this market. Columbia is full of college students, and for Harold’s audience, they’re interested in creativity and outrageous thinking.

The text is also placed in the center of the page. This helps to draw the reader’s attention to the text, and it adds a modern feel to the website. By centering the text, the website adds continuity to its features. Also, this feature helps with usability for the website. It’s extremely easy to navigate through the website, and the use of centered text helps achieve this effect.

Screen Shot 2015-02-18 at 10.23.16 PM

Finally, the use of color is another interesting aspect of the website. The most vibrant elements on the page are the doughnuts, and this is a smart move by the site’s designer. The main color scheme of the text is white, black and orange. The text show the company’s logo colors, and the use of these simple colors adds a modern tone to the website. Also, it’s adds a layer of professionalism to the website. The website seems sleek and elegant, and the color of the text plays a strong factor in this sense.

Overall, Harold’s typography is a strong and intriguing element to their website. My only criticism is that the use of uppercase letters throughout the entire website makes it difficult for the viewer to read in some areas of the website.

Other than that, the website is extremely effective in showcasing the company. The viewer easily understands the company’s product, and I appreciate the fact that the text is not the main element of the website. The text adds elegance and quirkiness to the website, but it gives enough space for the products to catch the audience’s eye.

Screen Shot 2015-02-18 at 10.36.04 PMAs this image shows, the text enhances the product and allows the user to understand the various aspects of Harold’s products.

–Natasha Brewer

February 18, 2015


2 thoughts on “Post 3: Harold’s Doughnuts

  1. I’m with you on the Bebas Neue font and the tone that it conveys. It’s kind of amazing that a font can inspire “humorous,” “serious,” “quirky,” “credible,” “innovative,” and “artisinal,” as it did for you. And I agree. It makes me think of a pop-up grilled-cheese shop in a liberal city.

    Having said that, I hate, hate hate the all-caps body text, which you’ve identified as Proxima Nova. It’s difficult to read, my eyes begin to blur after a sentence or two, and it makes it seem like the doughnut shop is yelling at me. I think the wide display only adds to the difficulty of reading it.



  2. I agree with you, Mark! It’s ugly, it jars me out of the otherwise cute and quirky experience of the website, and it’s harsh on the eyes. I’m afraid I don’t agree with the OP’s opinion that it adds any kind of “creative edge.” I think it was a lazy design decision that no one has bothered to change yet.

    I think the centering of the blog’s text is a good decision too, however; it just adds to the brand’s overall very minimalist aesthetic (emphasized nicely by Bebas Neue.) We talked about this in class, but white space is nice. It keeps the clutter out of our face and has a calming touch.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s