Tag Archives: typography

An important aspect of running a blog or a text-heavy website is readability. This is the concept of keeping a reader interested with an understandable flow of progression and alleviated strain on the eyes.

To start off with, avoid large blocks of text. These are intimidating and also difficult to read as it is easy to lose your place. Separate your text out into multiple paragraphs. This will help ease the intimidation factor of a wall of text as well as provide natural breaks for different topics. Adding in pictures or graphics (with a buffer border to keep the text from crowding around it) or breaking items into bulleted lists will also provide some white space and metaphorical “breathing room” for the eyes.

An easy way to point out the proper path of vision is changing font size. A step beyond this, text hierarchy, uses several sizes to differentiate between titles, headers of sections, and the body. This keeps the text organized and clear.

Bolding or italicizing for emphasis can be a tasteful addition, as long as it is used sparsely and specifically. Inserting bolded or italicized words creates an invisible category in the reader’s mind, so be sure to keep it consistent. In other words, if you have been bolding terms that you then define, avoid bolding, for instance, a warning or exclamation, as it will feel out of place to the reader and be distracting.

Emphasizing with all capitalized letters is usually a bad idea. While it certainly draws attention, it can make the word hard to read and can slow down the reader’s train of thought. In short titles, all caps can be acceptable.

A fun way to add character and style to your text is through changing the fonts so that, for example, the title is more unique and striking than the body text. The best way to make sure this is complementary and not distracting is to keep all of the fonts within the same font family. If your body text uses a sans-serif font (as is typical on the web), look for a title or header font that is also sans-serif. This is an easy trick for finding fonts that look excellent together.

Your line-length or measure ideally should be between 65 and 75 characters. Any longer will make it difficult for the reader’s eyes to find the continuation of the sentence from line to line.

Be aware of your audience. If you need to use a word they might not be familiar with, provide a definition in a non-demeaning way. A simple rephrasing of the word within parentheses immediately after its use is a safe way to make sure you and your readers are on the same page.

Kerning is the space between specific characters in a sequence. Letters like “A” “V” and “W” fit well with most other letters, but put alongside each other can be too wide, creating an awkward space in the middle of a word. This is where kerning comes in. Most design programs have the ability to adjust pairs one at a time, affecting only the highlighted text. Before you begin, make sure kerning is turned on in your program’s type preference menu.

The internet is an ever changing, ever developing platform in which creativity can soar with few boundaries or limitations. As such, web design is also a fluid stage for new ideas and vivid imagination. While this is an exciting concept, it can also be daunting. Where to begin? What is outdated and what is considered modern? Where is the line between eye-catching and obnoxious?

The design for a webpage needs first and foremost to convey the intended information. If a font is perfect for your site’s playful attitude, but is difficult for the viewer to read, then it is not doing its job. If the colors grab the viewer’s information, but go against the mood you are trying to set, the design is going to be counterintuitive.

Web design trends change quickly and can be difficult to keep up with. We’re here to help! Here are some of the most popular trends we are seeing in web design:

Long scroll UI patterns provide a natural path for the eye to follow and allow the designer to decide the most beneficial order to convey information. It is an easy interface for the user to interact with and encourages viewers to look at the entirety of the website as the design naturally sparks curiosity.

Creative animations for loading, hovering, hidden navigation screens, motion action, galleries etc. Animations draw the eyes and hold attention. They have the benefit of keeping a viewer interested while waiting for loading, encouraging the eye’s path along a page, and generally making formerly static images more interesting and engaging. Additionally they add personality and an opportunity for creativity.

Micro-interactions engage the user and affirm their actions. It helps the users see the results of their actions, engages them in communication, and can provide tips for maneuvering. Ideally these interactions occur seamlessly and without distracting from the information provided. Simplicity is key.

Card design is growing more popular as the use of Pinterest sky-rockets. The interface is familiar, easy to use, and an excellent way to display a large amount of information in an organized and aesthetically pleasing manner.

Cinemagraphs are the classier version of GIFs, bringing static pictures to life with minimal motion. These pictures have fewer limitations than GIFs and are less distracting and more mature.

Bold typography makes a quick and effective statement about your website’s mood and focus, while establishing your site as modern and unique. Even websites that are strictly focused on business benefit from eye-catching typography. With web fonts becoming more widely accessible, web designers are becoming bolder, making full use of the available tools.

According to Forbes, Natural stock photography use in web design is on the rise. Pictures are a classic method of catching attention and creating a connection with the viewer. But typical stock photos are boring and easily dismissed. Eye-catching, awe-inspiring, and amazing is “in.”

2015 was an exciting year for web development and creative new designs. It is thrilling to think of what 2016 will hold!