Typography and Web are two mediums that have only been blended together quite recently in history and it’s just now that I feel that we’re starting to see the full potential of this partnership. When browsing the web and creating websites of my own I am always drawn to websites that push the boundaries of type in creative and unique ways. The boundaries and guidelines set by design committees that 90% of the internet follow have created a more legible and functional internet but that’s not what interests me, type is an art form like any other and web design is just a new canvas for that art to flourish. In this blog I want to highlight creative use of typography in web design and focus on how websites use design fundamentals & the unique potential of web to create such stunning layouts.
The design practices which I will focus on with today’s article will be principles & methodology mentioned in posts by the three previous blogs I discussed in my last article (webflow, the futur, typographica).
Composition
the futur
Composition is the foundation of design and it is here where we make decisions that change the look of a design most drastically. A key part of all composition I’ve learned is Contrast. Maintaining good contrast is one— if not the most important rule to follow. Contrast is the most effective tool we have as designers in guiding the eyes of the viewers that will see our designs.
“If you ever find yourself stuck with a boring composition, push the contrast in the value, weight, size, and color of your subjects.”
This sentiment is shared in the futur’s blog post written by Matthew Encina which expands upon the many aspects of contrast in use and how it can entirely change the meaning of a subject in our designs.
Following Trends
Webflow
Something that not every designer is a fan of is following trends, as designers we always want to be unique and create designs no-one has ever seen before, but that’s rather difficult without inspiration; and that’s where trends come in. By reading posts such as this one by webflow that highlight the newest trends or even trends from the past we can see how other designers think and use their ideas as inspiration to craft and execute our own unique typographic designs.
Font Pairing & Treatment
Typographica & Webflow
Another extremely important consideration when designing any webpage; just like print, is choosing an effective pairing of fonts to fit your design. When choosing individual fonts there are many considerations to be made already. Considerations include things such as: tone, legibility & readability, however when pairing fonts together other considerations must be made. The tone can change tremendously when you look at two fonts together, also one must consider which font to use for headings and which to use for body copy.
Most of this logic is shared between print and web but some considerations that are unique for web design include: variations in size on different devices, the possibility of using animated text, using text with live updating data. Of course with this new layer of creative freedom come some difficulties that designers need to be aware of, because despite having access to thousands of fonts for print, not all fonts are treated equally on the web, as they need to be rendered by different web browsers and read on screens instead of paper.
Webflow has an excellent blog on the basics of web typography and Typographica has a short podcast that takes a deeper look at the process of selecting font pairings.
Theres certainly more to design than the three points I touched on here, but if theres anything that I think you should take from this blog; it is that designers always need to push the boundaries, whether it be their own comfort zones with type or turning a design fundamental on it’s head to create something incredible and different. There’s always more we can discover is possible with web type as this is a genre that has only just begun. And with that, these were some key points I found that I believe are fundamental for any future web designer looking to step up their use of typography when designing websites.
Design Done brief 