![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/design-blog-post-milyn.jpg\")
<\/p>\n<\/p>\n
Photo by\u00a0<\/span>Kaboompics .com\u00a0<\/b>from\u00a0<\/span>Pexels<\/b><\/p>\n <\/p>\n Typography is an art form all its own. Clever logos, appealing web designs, and eye-catching posters all benefit from a pop of well-designed text. Typography takes your message and transcends language barriers to convey ideas about brand and messaging just through the shape and treatment of the type.<\/span><\/p>\n Graphic design trends are always changing. If you truly want to keep your finger on the pulse of design, you must watch more than just popular logos or web site changes. Typography is a critical part of design and it also morphs and changes with the times.\u00a0<\/span><\/p>\n So, to keep your web designs on the cutting edge of graphic design trends, let\u2019s predict the future: what\u2019s coming up for typography in web design in 2020?<\/span><\/p>\n Source: <\/span><\/i>Viita Watches<\/span><\/i><\/a><\/p>\n <\/p>\n Typography captures an idea using written words, but the best use of type is when you can convey an idea even to someone who doesn\u2019t speak your language. An interesting trend in type is taking this idea quite literally. Using black or large, chunky fonts, the trend involves overlaying images directly into the type.<\/span><\/p>\n This creates an interesting visual. You know the saying, a picture is worth a thousand words, right? Well, imagine how much of a story you can tell with a little photography sprinkled into your text.<\/span><\/p>\n This effect is great for hero images and can be simply implemented using the mask-image CSS property.<\/span><\/p>\n Source: <\/span><\/i>bhuti.co<\/span><\/i><\/a><\/p>\n The skinny, light sans-serif font is a tried and true sight in the world of web design and branding. Its sleek lines look modern, classy, and effortlessly respectable. Thin, sans-serif fonts look great with any logo type and work astonishingly well for both headings and navigation text.<\/span><\/p>\n It seems like ever since Helvetica hit the scene as a crowd-pleaser, designers have turned to the light sans-serif font as a perfect accompaniment for a huge variety of brands and websites. This is for good reason\u2014it just looks great!<\/span><\/p>\n Honestly, light sans-serif fonts are some of the easiest to match. No matter which typography trend you\u2019re incorporating into your design, a light sans-serif font could find an easy home in your project.<\/span><\/p>\n Some may say it\u2019s the easy way out\u2014but, really, we should all just work <\/span>smarter, <\/span><\/i>not <\/span>harder,<\/span><\/i> right? Why fix what\u2019s not broken?<\/span><\/p>\n Source: <\/span><\/i>DiscoverLexus.com<\/span><\/i><\/a><\/p>\n For a while, the trend was the bigger the better. Web-users were inundated with gigantic hero images and their equally giga-sized text that took up the entire front of a web site to the fold. The messages were big, bold, and visually loud.<\/span><\/p>\n They also weren\u2019t the best for user experience.<\/span><\/p>\n Luckily, it seems like we\u2019re turning back the font size clock on this monstrous type. The font size on hero images is shrinking rapidly. This not only makes it easier to fit more information before the web fold, but it makes your life a lot easier when developing for mobile as well.<\/span><\/p>\n I think we\u2019ve all run into that issue where our dramatic typography just doesn\u2019t translate well to small devices and our overall design aesthetic loses something in the adjustment. With smaller hero type, the transition isn\u2019t so stark, so thinking responsive is just that much easier.<\/span><\/p>\n <\/p>\n Source:<\/span><\/i> <\/i>G\u2019nosh<\/span><\/i><\/a><\/p>\n The pixel-perfect look of flat design has fallen out of favor for a more human approach. When you design for the web, it\u2019s a constant struggle to convey your brand in a <\/span>human<\/span><\/i> way. The more sincere your connections are with your viewers; the better your site\u2019s results tend to be.<\/span><\/p>\n Since so much business is done online, many companies and websites are looking for ways to soften their brand to a \u201cfriendly face\u201d in a digital space.<\/span><\/p>\n Hand-lettered calligraphy is a great way to convey this. Now, this doesn\u2019t necessarily mean calligraphy in the most traditional sense\u2014there\u2019s no Olde English here. Instead, the trend involves headlines, fonts, or logos that look like they were created using traditional media and a human hand. There\u2019s a level of imperfection in the loopy, friendly strokes that feels less computer-generated.<\/span><\/p>\n This trend looks great in all types of design, from web design to t-shirts and posters, so it\u2019s great to incorporate in an overall branding look.<\/span><\/p>\n Source: <\/span><\/i>9elements.com<\/span><\/i><\/a><\/p>\n Politically, it seems like the younger generations are getting a little punk rock. It\u2019s an age of speaking your mind, rebellion, and edginess that has found its way into typographical trends. Think bold, black fonts with weathering, ink splats, or bleeding edges.<\/span><\/p>\n Grunge doesn\u2019t have to have an aggressive appearance to it. For a lighter approach, the grunge aesthetic is seen applied through fonts with bristled brush strokes. This makes a handwritten approach feel real, vibrant, and passionate.<\/span><\/p>\n This approach works well for websites that are geared towards younger demographics or brands with a bit of an edge. Other websites that could benefit from a grunge treatment would be ones themed around music or art. A little bit of edge can go a long way to upping your site\u2019s cool factor.<\/span><\/p>\n Source: <\/span><\/i>Tavanovincent.com<\/span><\/i><\/a><\/p>\n You may be familiar with the concept of brutalist architecture. It came into the scene in the 1950\u2019s and 1960\u2019s and is characterized by structures with sharp edges, plain appearances, and a lot of concrete slabs. It\u2019s drab, functional, and also has an air of oppressiveness to it.<\/span><\/p>\n So, taking this concept to typography, you\u2019ll often see blocky fonts and typesetting that feels a little raw or unpolished. It\u2019s a broad style choice, but it\u2019s often seen in print design on eye-catching posters. So, for web design, you\u2019ll see it in unconventional layouts and websites that look to make bold statements.<\/span><\/p>\n We\u2019ve all seen the slick slide or fade-in of type on a hero slider. CSS3 and HTML5 are crazy powerful though, so many developers are pushing their type animations far beyond the conventional. Animated type can take a boring design and elevate it to a far more interactive and immersive experience.<\/span><\/p>\n For example, let\u2019s say that your site\u2019s theme would work well with some neon light treatment. Using animation, you can not only light that type up but cause it to flicker or wiggle when interacted with.<\/span><\/p>\n Add a sense of mystery to your site by using a pixel-styled font and animate your text writing onto the screen after a cursor. Then, add a cool flash or jitter to the text to give it a glitching feel. This would be an amazing look for a mystery writer, short film, or any brand that wants to up the creep factor.<\/span><\/p>\n For an effective look on your blog, how about type that is highlighted by a low-opacity border or bracket when hovered over, which will draw major attention to your message?<\/span><\/p>\n Animations are surprisingly simple to implement and can take your typographical efforts to new levels. After all, we\u2019ve moved far away from the world of print\u2014why should our text be stagnant?<\/span><\/p>\n It\u2019s an exciting time in web design. As more and more designers are breaking out of the confines of template sites and pushing the boundaries into exciting new frontiers, we\u2019re going to see more of what typography can really do.<\/span><\/p>\n Thanks to the beauty of web fonts and the power of CSS3 and HTML5, we can look forward to years of interactive typography trends that far exceed anything print can do. Your website can take a written message and, with a simple overlay or animation, convey more in just a few words than in a sea of paragraphs.<\/span><\/p>\n Typography is an incredibly exciting field and the web is pushing the boundary faster than ever. While you certainly don\u2019t have to incorporate every trend into the sites you design, try and find some that work for you.\u00a0<\/span><\/p>\n Some, like light sans-serif fonts, are timeless, others a passing trend\u2014but any of these ideas will give your website a visual, typographical punch-up that is sure to impress.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":" Photo by\u00a0Kaboompics .com\u00a0from\u00a0Pexels Typography is an art form all its own. Clever logos, appealing web designs, and eye-catching posters all benefit from a pop…<\/p>\n","protected":false},"author":4,"featured_media":9228,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22],"tags":[],"class_list":{"0":"post-9227","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-art-inspiration"},"acf":[],"yoast_head":"\nChunky type with overlays<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/tita-watch-1024x491.jpg\")
<\/p>\nSkinny sans-serif<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/skinny-sans-serif.jpg\")
<\/p>\nShrunken hero type<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/shrunken-hero-type.jpg\")
<\/span><\/i><\/p>\nHand-lettered calligraphy<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/hand-lettered-typography.jpg\")
<\/span><\/i><\/p>\nGrungy attitude<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/grungy-type.jpg\")
<\/span><\/i><\/p>\nBrutalism<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/brutalism-1024x568.jpg\")
<\/span><\/i><\/p>\nAnimated type<\/span><\/h2>\n
![\"\"](\"https:\/\/www.vexels.com\/blog\/wp-content\/uploads\/2019\/09\/animated-type.jpg\")
\n<\/span><\/a>Source: <\/span><\/i>hypebeast.com<\/span><\/i><\/a><\/p>\nIn conclusion<\/h2>\n