Why is typography important in web design

Text size matters The size of the words on your page can also contribute to the user experience. Change weight Changing the weight of your text to highlight keywords on your webpage can enhance readability for users.

Check your typography in different browsers Google offers many web safe fonts that can be downloaded for free but it is important that to be aware that not all of them display well across different browsers and platforms. Twitter Tweet. Facebook Share. Website Design with SEO. Stay Connected Join over , of your peers and receive our weekly newsletter which features the top trends, news and expert analysis to help keep you ahead of the curve.

Get the best of B2C in your inbox: Subscribe to our newsletter Sign up. Your subscription was successful. Popular Articles. Image: What is Social Marketing? With 7 Stellar Examples by Jessica Huhn. Discuss This Article. To quickly define them, main content is the one that directly relates to the page it is on. This is where you present the information you want your viewers to see when they are on that page.

Secondary content is the kind of content you find in the side columns. It is usually comprised of links to related stories, CTAs, tags, etc. Navigation is self-explanatory; it is the content viewers navigate with. It is very important that from the first second, viewers are able to distinguish between different types of content.

Using typographic styles to differentiate between the type of content makes your website more clear and easier to understand. Notice how their headers are an in underlined blue font, bigger than any other font on the page.

They have 3 elements in the main content that are of the same size: the website names, the copy, and the time that the page was created.

They differentiated them by using color: green for website names, black for copy, and gray for time. Perhaps you can share them in the comments? If you maintain these elements across all the pages of your website, it would be very easy for your viewers to tell where your navigation is, what your main content is, and what the secondary content is, no matter which page they are. Your viewers will be able to easily understand your content, how it is structured, and how they can navigate through it.

The contrast of the elements makes them sophisticated and charming. How can we apply this to web design? By using a clean, easy to read font for copy with stylized headers, you can achieve that charming balance and give your website a sophisticated and well designed feel.

Typical content management systems can allow up to 6 different types of headers, from H1 most important to H6 least important. The less important they get, the less luxurious your type choice should be. The example I want to use here is from Quoteskine.

Courier—a serif font—is paired with a few sans serif fonts in this design. The fonts work together with the design to create a look that brings together an old-world style with a new bright and modern feel. This site has lots of type and is organized well with set styles that create a user-friendly site. Bold uppercase type in the upper navigation work well with the sans serif body text and red serif headlines.

This blog has several font styles at work and uses typography to their advantage by keeping the site organized and easy to navigate. The rest of the text complements the style, with good-sized easy to read body text using a serif font. Check out this showcase of 20 websites with beautiful typography for more design inspiration and examples. I hope you enjoyed this look at typography in web design. Typography is a broad topic but an important concept to understand as a designer of any kind.

For example, if you are designing a site for a realtor , it should look very professional, whereas a site for an artist will have a more laid back and open design. How heavily does typography play into the aesthetics of a web design?

How much time should you spend on typography when designing a site? Join our mission to provide industry-leading digital marketing services to businesses around the globe - all while building your personal knowledge and growing as an individual.

Loading results An error occurred when getting the results, please click here to try again or modify your search criteria. Sorry, no results have been found, please try other search criteria. Showing 1 - 10 out of for: Article. Previous Next. Typography Basics Typography is the use of type in a design.

There are two major classifications of fonts to choose from: serif and sans serif fonts. Things to Consider for Typography on the Web There are many differences in handling type in print versus on the web. Taking Control of Fonts There are many settings that control the way your font appears on a web page. Other possible and less popular units of measurements are: points pt pica pc inches in centimeters cm millimeters mm x space ex Using pt is great for print stylesheets because they are a print unit of measurement.

Web Safe Fonts What is a web safe or web standard font? Any more will clutter the website, make it more difficult to read, and make it harder to discover your calls to action.

Using italics and bold adds more variation to your font choices as well. There are 5 basic classifications of typefaces: Serif — A finishing stroke on the ends of letters on certain typefaces Times New Roman, Georgia, Garamond, Century, etc Sans-Serif — The opposite of a serif font; does NOT have a finishing stroke on the ends of letters on typefaces Arial, Helvetica, Geneva, Product Sans, etc Script — Typefaces that imitate natural handwriting and cursive, generally used for display or trade printing Alex Brush, Pacifico, Allura, etc Monospaced — Each letter in a monospaced typeface takes up the same amount of space on a horizontal line of text Courier, New Courier, Lucida Console, etc Display — Display typefaces are designed and intended to use in large sizes, such as headings, instead of paragraph text Stencil, Rosewood, Magneto, Collegiate, etc.

Article Author. Founded in , Awebco continues to serve local businesses and national businesses in the USA. Our mission is to help business owners eliminate the task of building and maintain their website by hiring us to do it for them. Like this post? Share it! Share on facebook Facebook.

Share on twitter Twitter. Share on linkedin LinkedIn. Leave a Reply Cancel reply Your email address will not be published.

Related Articles. Different Types of Digital Marketing Campaigns. How to Get More Likes on Facebook. Table of Contents. Want help with your website? Website URL. This field is for validation purposes and should be left unchanged. Address Sheridan St.