How To Create Amazing Typography For Web Design
Typography is known as the art of arranging type into a design-appropriate, aesthetically pleasing and legible layout. Print that’s set in stone can’t have its appearance altered once it’s been printed. However, users can do things differently on the web. For example, they can adapt their browser settings to:
• Change colors to increase contrast
• Overwrite font size choices a designer has made
• Decrease a default font size
As a result, you might assume that effective typography is not possible on the web, but that’s not true!
The web can offer superior options to traditional typography as well as features that allow the user to control the appearance of type to suit their personal tastes and needs. However, that doesn’t mean that as a designer, you can discard your responsibility to present beautiful type with proper positioning and etc. A majority of the rules from print apply to the web as well!
What Will You Learn from This Guide?
By giving me 10 minutes of your time, you will:
• Learn the basics of typography
• Understand the trends for dramatic typography
• See snippets of the best typography
• Discover the best places to get awesome web fonts for your website.
At the end of this guide, I hope to steer you on the right track of creating impressive typography for your future web design work.
What are Web Fonts and How Do You Use Them?
In the past, you had to stick to a certain group of fonts if you wanted the type on the web to appear in the same font across different computers. The common choices were Arial (PC)/Helvetica, Verdana, Times, Georgia and various versions of Courier. This strict palette of fonts quickly zaps the joy from web designers because there’s isn’t access to a full set of fonts to choose from. However, that has changed today with the arrival of some cool services:
With this new range of web fonts to choose from, keep in mind that less is more. Simply choose one base font and one display font.
Try to stick with those choices because you don’t need to use all the fonts for your design. Additionally, you should pick fonts that show relevance to your subject matter. A script font may work well for a hand-written letter, but it may not have the same effect when you’re using it on a corporate website.
Next on the Line is Typographic Alignment
Similar to print, you can also set your type on the web by using either justified or ragged line endings. Simply use the text-align property, and pick either right for ragged left, left for ragged right, or justify for text to be arranged with ragged line endings.
How to Adjust the Column Widths
Did you know that the width of a text column has a major impact on its readability? If you notice for prints, the columns are usually set to contain up to 75 characters which is approximately nine to fifteen words wide. This is noted as the ideal width that allows readers to move between lines with ease and not lose their place.
Thus, the same rules do apply on the web. So you should aim to set your type in columns without exceeding the 80 characters wide limit. You can set your column width in ems as well. For example, width: 60em; (as written in CSS code).
Tips on Spanning
If you plan to kern between individual characters, you can wrap the affected elements in their own tags. After that, you can control the kerning by applying CSS properties.
However, this can quickly become a big job so it’s best to use them sparingly. You should also consider using a grid to assist you with aligning the baselines of your type into a clear structure to improve design coherence and aid legibility.
Will Dramatic Typography Last as a Trend?
You will be surprised (and relieved) to know that dramatic typography is less of a trend, and more of a technique that relies on self-reinvention that happens every few years. What’s being observed is the current iteration of how designers utilize typography for dramatic effects.
How Does Good Typography Look Like?
In general, typography considered good must fulfill the following goals:
• Leave a memorable impression
• Being cohesive with technological requirements like responsive design and browser compatibility
• Works well with other design tactics
• Communicate the core message of the written text
Currently, most of today’s typography trends meet these goals. Large, white type on the other hand may start to subside in the next era of design. 3D animations and effects are also expected to play a role in how type will be presented.
To prove that typography on the web is more malleable and more stylish than ever, check out some of the code snippets below:
• Opening Type: This is a cool paper cutout effect that is created with less than hundred lines of CSS.
• Star Wars Scrolling Text: If you’re a fan of the Star Wars trilogy, you will be delighted to know that this style of text is still in!
• 3D CSS Typography: As mentioned before, 3D animations will play a significant role in the world of typography soon so here are examples.
• Text Shadow Effects: This is what flat and long shadows, inset shadows, 3D shadows and retro thin line shadows look like.
• Diagonal-Dashed Shadow: A good example of dynamic CSS text shadows. The example uses diagonal dashes for this jitter-animated effect.
• Text Filling with Water: This animated effect for your text will work well on a loading screen.
Now that you know more about these amazing developments in typography for web design, whether you are beginner or a seasoned web designer, there is no better time than now to start improving the typography for your web design!