A flat design is back in the scene, and minimalism is currently a hit. In web design, Typography is now a trend to follow. Typography and Web Design have been going hand in hand since the start of this year and the trend seems to be growing more and more strong as we move towards the end of 2016.

Typographical trends in Web design:

1. Extreme size
2. Superimposed images (Text on image)
3. Different uses of typefaces
4. Custom typeface
5. Artistic fonts

This article discusses these Techniques, with guidelines and advice. It also includes samples for references. Download the E-book entitled Web Design Trends 2015 and 2016 for more typography techniques you can use.

Extreme Size

Designers create graphics with texts that are either too large or small. You can adjust your text in the size that would complement best with your image.

Large Typography

To make a graphic appealing, use large typefaces interlaced with appropriate graphics.

This style has the following attributes:

• Bigger weight and proportion
• 85 points or more in size
• Thick strokes or in full caps

Another element that’s noticeable here is the text size. The text on the image is stretched to occupy the entire screen. Thin serifs are added to make the contrast between the strokes more obvious. Also, texts can have alternating font sizes.

Be creative. You can adjust the spacing of your text by altering its alignments. And since the text follows this typography, caps are unnecessary. You can also play with different colors.

You can follow a specific technique for this. Place a large text size then simply adjust it to either larger or smaller. In doing so, it would help you in choosing the most suitable text size. This technique was used for UXPin’s website redesign. On the photo below, we placed the large-sized headline, with 59 pt. The text below is smaller and positioned in contrast with the background. Since the headline is placed on a white background, it appears bigger than it is. Classic sans-serif typeface, specifically Proxima Nova, is used for legibility.

Small Typography

If you wish to work on a more subtle technique, you can use this type. Just make sure that the text is not overshadowed by other elements on screen.

Strategies for these types are not the same. Small types are placed on black backgrounds and on a wider negative space. Small typography works best over a hero style image. The contrast and the minimal space occupied by the text make the image more powerful.

However, small type often needs amplification. Decorating the image with contrasting colors or adding animations is a great way. But small type works best by placing it on negative space.

Superimposed texts on images

Texts and images taken as two separate elements is a thing of the past. Now, superimposing texts over images are sure hits.

Factors to consider here are contrast and legibility. Designers must choose the right directions. The effectiveness of the site depends on how and where texts and images are placed. Ensure that the text is placed in an angle where the focal points of the image are not compromised.

Interlacing texts and images must not be confusing. For instance, if a photographer overlays his name over a photo that’s not his, visitors would question his credibility.

Different uses of typefaces

Generally, artists must be creative to produce quality outcome. As with other fields of expertise, you must never stop learning and practicing to enhance your skills. In here, experiment other uses of typefaces such as placing images IN texts to make the site trendier.

A designer shouldn’t feel pressured in creating websites. It’s not a requirement to follow every technique strictly. It’s actually best to create your own typeface. According to the book Web Design Trends 2015 & 2016 editions, readability is a key factor, so don’t overdo things.

Creative typography is beautiful on its own. Avoid cluttering your site with too many elements. Use simple backgrounds. In the photo above, single-color blanket is used to highlight text.

Customized Typeface

Customizing typeface is a more challenging technique, but it will enhance your designing skills. It will also increase potentials of having stronger brand identity.

Executing your own typeface requires patience and creativity. Study the style of your font. It must compliment the theme of the site. Avoid using it in ALL your texts. Overusing a font makes your website messy. Limit the typeface to focal points like headline. Also, make sure your typeface appears in different browsers/devices.

Artistic font styles

There are varieties of font styles. There are fonts designed to beautify sites. Texts written in these fonts may appear more as image kinds than as plain texts. But for some sites, it could be appropriate.

This approach is typical in typography. But for websites, this embellishment is more effective if used carefully.

Avoid the fonts that are commonly and widely used, like the “word cloud”. This weakens the messages you convey if a lot of other sites are already using it.

Combining Techniques

You can combine techniques but you must study them well. For instance, if you place an image in a text, use large text or else the image would appear too small to be seen.

Study the techniques individually. Artistic kinds of fonts are already flashy, so it can already be the focal points. Placing too many artistic fonts and other elements might be too much.

A combination of techniques is shown in the photo above. Small texts appear first. Then the message is written in larger typeface and is superimposed over the image to put emphasis to the message.

Conclusion

Fundamentally, these techniques make websites effective. Following typography and its trends, plain texts become the visual as well and make your design more interesting.

To create site prototypes without codes, you can avail of a trial with UXPin for free. The application comes with different custom elements and typefaces.