Hackernoon logoTypography Trends in Web Design 2017 by@Jessie.a

Typography Trends in Web Design 2017

Jessie Hacker Noon profile picture



Typography is important. They might seem like an insignificant part of the design, but one should be really careful when choosing the right typeface and font size. Bad typography can ruin your design more than you think. Typography can really affect the way the user perceives data that is presented to them.

Typography of a website is a very crucial component of its design. The typography of a website plays an important role in expressing the message the website wants to convey. In the UX perspective, Good typography undoubtedly plays a central part.

So what has been trending in typography this year? Let’s take a look.

Big or Nothing

Big and bold typefaces have been the trend for the year. Not only the bigger fonts are eye-catchy, they better utilize the white space on the website. The big typefaces are chosen to convey the message of the website or what the brand stands for.

One example of big typography is DigitalWerk

Custom Typefaces

Custom is always good. When going for the standard fonts may seem repetitive as there is only a finite number of fonts that one can choose from. So this has been a trend to create a custom font that gives you the flexibility to create what goes well with your design, rather than choosing one.

Custom fonts are unique. Much like a person’s handwriting. So big brands are investing on custom fonts so that the fonts they use are a reflection of what they are. The font styles, size, and the colors themselves are a message that is conveyed along with the message that they are written with.

The example for this type of typography is 1md.


The handwritten typeface gives a personal touch to the design. It makes the website look more comfortable, approachable and friendly. One of the main concerns in the hand-written typeface is readability. SInce handwriting can be hard to read sometimes. When thinking of a hand-written typeface the most common examples that come to mind are written in cursive, but handwritten typefaces go beyond that. Like Block letters or decorative letters.

We Are Island is an example of hand-written typography


Like the name, the watercolor typeface looks like words written by the stroke of painting-brush using watercolors. They give an artistic look to the website and of course, since it is watercolor, the colors and textures look great too.

This typeface is a great tool to give a personal touch to the design. The watercolor typeface looks more fun, creative, and friendly.

Collette Dinnigan uses the water-color typography perfectly.

Mix It Up

Why stick to a single typeface when you can take two or more and add it to the mix. Combine different typeface that does not generally go well with each other. Combine different fonts like a handwritten and a standard typeface, a big typeface with small, or better yet go crazy with the fonts. This gives a rather different, out-of-the-box look that will get users more hooked with the design.

The key in creating such designs is to choose which font will go where to give the right emphasis to the message that needs to be conveyed.

One great example for Mixed typography is Timmy Tompkins’.


Text and image are what you usually use to convey a message. In this type of typography, overlay an image with text to give an even powerful message. So take an image that goes well with the theme of the company and layer over it the text that makes it more beautiful.

The challenge here is that when you place a text over an image, it should cover up the relevant part of the image that is crucial in expressing the information that you need to. Also, the typeface should match the image and its theme. Another important factor is the color of the font. The font color should complement the color theme of the image as well as should stand out from the image.

Australian Property Magazine is a great example of this type of typography.


If you were not a fan of geometry back then in school, you might want to change your mind now. geometric typography has been one of the top trending typography of the year. This typeface has a cube-like structure and characters with very fine edge and colorful. This kind of typography gives a futuristic and modern look to the design.

Jova is a really good example.


Why stick to the normal way of writing the text in horizontal. Taking a different path from the usual horizontal style to writing a text will take more attention to the message to be conveyed. The exact opposite way would be to take a vertical approach. But even that is a little traditional. Write the message to fit different angles, different shapes, or within the shapes of different objects. Of course, the major concern here is the readability of the text when written in a different format.

Check out The Society Inc.


Going responsive is unavoidable at this time. So it is important that like every other component on the website, the typeface also adapts itself to the size of the screen of every device. For example, if you are using a big and bold typeface in the hero section of the website and if the letters or the words sit on top of the other on a smaller device, it will create a bad user experience and needless to say the users will not hang around much.

The typeface should be such that they shrink and expand to the match the size of the screen.

Wrapping it up

The design trends keep on changing and it is essential to keep up with the latest trends and know what’s people demanding worldwide. Knowing latest trends can be a more efficient way to communicate that your business is up to date. The latest typography trends can be used convey this message more loud and clear. This makes it easier for the business to reach out and make a mark for itself

So which of these typography trends are you a fan of? Which one would you like to see more of and which one do you think that they should stop using? Let us know in the comment section below.


Join Hacker Noon

Create your free account to unlock your custom reading experience.