{"id":4644,"date":"2018-06-22T13:13:01","date_gmt":"2018-06-22T05:13:01","guid":{"rendered":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/?p=4644"},"modified":"2023-03-08T11:14:08","modified_gmt":"2023-03-08T03:14:08","slug":"design-showcase-typography-in-web-design","status":"publish","type":"post","link":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/design-showcase-typography-in-web-design\/","title":{"rendered":"Design Showcase: Typography In Web Design"},"content":{"rendered":"

More than the photography and the graphic designs that we use to create our stunning websites, the best way to communicate to our target audience is through texts. That\u2019s why typography is important in web design. It can make or break the whole aesthetics of your website. Typography is as dynamic as the other design elements. It has its own beauty and complexity that makes a design stand out amongst the others. From print ads, to billboards, and up to any online material, typography gives the \u2018character\u2019 that makes a design more enticing to the audience\u2019s eye.<\/p>\n

 <\/p>\n

Contrary to what layman marketers may have known, typography is not just about choosing the fonts to use for your brand. Yeah, it\u2019s not just that. Font is just a part of typography. There are a lot of factors that you have to consider to be able to produce a well-crafted typography. Read further so you can get inspiration on how to communicate to your target market using the magic of typography.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Find Your Purpose<\/h2>\n

Just like any other art form, you have to identify the purpose of your design (or else, you won\u2019t know how to proceed). Knowing the purpose or the theme of your website can help set the mood and tone for your typography style. The medium and the message that you want to convey should go in harmony with your choice of type.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

The example above is created by Tangent<\/a> for SaveSmart. As a website that talks about saving money, it\u2019s purpose is to make it exciting to talk about money. So, using playful and dynamic typography, the website becomes more upbeat and effective.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Identify Your Target Market<\/h2>\n

Knowing who you are communicating with is very crucial in creating the typography for your website. The demographics of your audience plays a big role in terms on knowing their cultural influence, interests, and preferences. For instance, if your users are kids, then the typography has to be a little more playful than usual. If your website is for a luxury hotel, then the texts have to look elegant and posh.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Since Gipimotor<\/a> is focused on promoting cars to enthusiasts who like classic racing cars, they keep the font style classy by combining serif and sanserif in an elegant way.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Rimac Automobile, on the other hand, appeals to the sporty and techier car fanatics. That\u2019s why they go for a more techy, high powered fonts to put more \u201caction\u201d on the look of their website.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Choose The Right Font<\/h2>\n

Every font has a personality. Now that you have identified your purpose and your target audience, it should be easier to choose for the font that you\u2019re going to use. The size and style of the font is very important. It should also suit the illustration or photography on the website. It\u2019s important to choose simple fonts so it will not overpower other elements.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Too many font types can also make a design look terrible. If you want to have hierarchy or if you want to highlight a certain text, you can use different versions of the font or you can adjust the size. But, if it\u2019s really necessary to use another font (for aesthetic purposes), just make sure to select pairing fonts<\/a> so it will not look cluttered.<\/p>\n

 <\/p>\n

Frans Hals Museum<\/a> made it possible to use a combination of fonts but it\u2019s not overwhelming the overall design of the website.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Lines And Characters<\/h2>\n

The words and characters are also important in the typography design. The gaps between the lines, or the line height, makes the content of your website readable. If the lines are too tight, it may be hard for the users to understand your message.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Another factor to consider is the kerning, or the space between each letter. Improper or incorrect kerning can change the meaning of a certain word. It\u2019s also recommended to the letter spacing uniform for the entire word to make it look balanced.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

The line length should also be considered to keep the design pleasing to the eyes. Ideally, a line should only be consist of 50 to 70 characters.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

\n

 <\/p>\n

Standardize Your Design With A Style Guide<\/h2>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

If your job is to create typography, you can create your own style guide to standardize it across all your designs. From categorising it to different types, up to grouping it based on how you used it for previous clients. You can already create your own sample and templates, including color combinations, to make it easier for you to create your own typography.<\/p>\n

 <\/p>\n

See more web typography inspirations at Awwwards.com<\/a><\/strong><\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

More than the photography and the graphic designs that we use to create our stunning websites, the best way to communicate to our target audience is through texts. That\u2019s why typography is important in web design. It can make or break the whole aesthetics of your website. Typography is as dynamic as the other design […]<\/p>\n","protected":false},"author":8,"featured_media":12388,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"wds_primary_category":0,"footnotes":""},"categories":[885],"tags":[310,190],"class_list":["post-4644","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design-development","tag-typography","tag-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/posts\/4644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/comments?post=4644"}],"version-history":[{"count":0,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/posts\/4644\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/media\/12388"}],"wp:attachment":[{"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/media?parent=4644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/categories?post=4644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/glutenfreepleasure.com\/__proxy_domain\/www.oom.com.sg\/wp-json\/wp\/v2\/tags?post=4644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}