Are There Universal Fonts?

By GearedBull Jim Hood - Own workCC BY-SA 4.0Link
Typography is a key design element in websites and in print projects. Yes, print still matters.

When you choose a font you are considering a type but also color, size, and placement. But you are also considering things like legibility and the impression it makes on a viewer.

This post is in Helvetica. Would it change your mind about reading this if it was written in Georgia or if the font used was the very common Times?  It might make a difference if this entire post was in a different font or a different size or in another color.

There are 5 fonts that are described as "Universal Fonts For Web and Mobile Design"
by Nick Babich on uxplanet.org. Are they universal? No. In fact, I'm never surprised that a client can't distinguish the difference between fonts such as Arial, Helvetica or Verdana. But to a designer, the differences do may=ttter in the look of a page or an entire site.

Open Sans is optimized both for print and web. Since this typeface features wide apertures on many letters and a large x-height (tall lower-case letters), it stays highly legible on both large and small screens.

Roboto is a font I will admit that I have never used. has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. It may be something you see every day because Roboto is the default font on Android and other Google services.

Helvetica is a widely used sans-serif typeface developed in 1957 which has a high x-height, the termination of strokes on horizontal or vertical lines and unusually tight spacing between letters, which combine to give it a dense, compact appearance.

Helvetica even has a documentary film made about it.

Montserrat was inspired by old posters and signs in the Montserrat neighborhood of Buenos Aires and Julieta Ulanovsky designed this typeface. The geometric type optimized for digital usage and it can be an excellent choice for minimal and modern websites. It works well for short pieces of all caps, such as headers.

Avenir comes from the French word avenir meaning “future”. The font family goes back to geometric style sans-serif typefaces developed in the 1920s that took the circle as a basis, such as Erbar and Futura.


Personal Websites

I feel bad for Tim Berners Lee (best known as the inventor of the World Wide Web) who has said that one thing he did not anticipate was how quickly the World Wide Web would become a marketplace.

Tim (who is currently a professor of computer science at the University of Oxford and the Massachusetts Institute of Technology) reminds us that in those early days personal websites dominated.

But not everything on the web is commercial. Most blogs, including this one, is personal, or at least not commercial. Some personal websites have become "commercial." I'm not thinking of ones that may have some Google or Amazon ads. I'm thinking of ones that contain personal thoughts and images but are also "selling" the owner as a brand.

This website is my personal website, but it does work to sell me. It is part of my web design business because it acts as an example of using a free site like Blogger for your website.

Blogs work as websites because when you are consistently publishing on a blog you are likely to attract attention on social media and search engines and gain followers.

How often is consistent? I have read that commercial blogs that publish more than 16 posts per month get more than three times the traffic of blogs that published less than 4 posts per month. So, that's a recommendation of about every other day or 4 times per week.

This is Melanie Daveid's portfolio features a selection of imagery from her best campaigns and apps. Is it personal? yes. But it's also commercial as it sells her, though not any actual product.
blog.hubspot.com has some best personal website samples and some best practices for personal, as in portfolio, websites. For example, using lots of visuals (even if your brand includes written work) including logos and other branding.

A personal site should be personal - i.e. it should show viewers your personality, style, maybe even your sense of humor, if that is part of what you are selling.

Simplicity should reign when it comes to organization. A main menu with just a few categories that perhaps subdivide into more granular pages after visitors land on the main page is a good navigation plan.


Color and Web Design


From the blog at 99designs.com, I found a good summarizing article about selecting the appropriate colors for your web design project.

Color communicates. A lot of that communication is on an emotional level because color choices can influence a visitor. 

Warm colors can have an energetic effect but used alone they can also over-stimulate, so they are frequently mixed with cool and neutral colors for balance.
Red—active, emotional, passionate, strength, love, intensity
Pink—sweet, romantic, playful, warm, compassionate, soft
Orange—warm, enthusiastic, success, determination, friendly
Yellow—youthful, lively, energetic, fresh, optimistic

The cool colors have a calming effect on the viewer, and that is why they are the most common colors used on websites.
Green—fresh, calm, relaxed, trust, peaceful, hopeful, healing
Blue—comfort, clarity, calm, trust, integrity, loyalty, reliability
Purple—glamour, power, nostalgic, luxury, ambition, spiritual

There are also neutral colors that when mixed with warm or cool colors can tone down primary colors and provide balance in web design.
Gray—respect, wisdom, patience, modern, longevity, intelligent
Black—powerful, bold, serious, elegant, luxurious, dramatic, formal
Brown—friendships, earth, home, outdoors, credibility, simplicity, endurance

There are also trends and traditions such as red and orange used for restaurants, banks and financial institutions using blue, and luxury products packaged in black. And color theory goes much further than the 3 groups above. If you really want to go deeper, look into three commonly accepted structures for a color scheme: triadic, complementary and analogue colors.