1 / 5

Simple Ways to Improve Typography in Your Web Design

In This article, you will focus on how to apply these fonts to web design using CSS and improve your typography the way you use them in your design projects. Let’s get started!

anthonyscoble
Download Presentation

Simple Ways to Improve Typography in Your Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Simple Ways to Improve Typography in Your Web Design When we talk about typography, many people including designers think that it consists of only choosing a typeface and font size which fit to the theme of a particular project. But there is much more in the room to achieving a good typography. Web designers often neglect the important details while choosing a typography for their project. These details give the designer total control, allowing them to create beautiful and consistent typography in web designs. In This article, you will focus on how to apply these fonts to web design using CSS using CSS and improve your typography the way you use them in your design projects. Let’s get started! web design Measure Measure The measure is the length of a line of type. Long or short lines can distract reader’s mind a lot. For optimum readability you want the measure to be between 40-80 characters, including spaces.

  2. A simple way to calculate the measure is to use Robert Bringhurst’s method p { font-size: 10px; max-width: 300px; } Leading Leading Leading is the space between the lines in a body of copy that plays a big role in readability. It improves the overall appearance of the text. A good rule is to set the leading 2 2- -5pt 5pt larger larger than than the the type type size size To get the right spacing body { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 16px; } Hanging Hanging Quotes Quotes Hang quotes in the margin of the body of text. Hanging quotes keeps the left alignment intact and balanced hence improving readability. This can be achieved very easily with CSS using the blockquote element:

  3. blockquote { text-indent: -0.8em; font-size: 12px; } Vertical Rhythm Vertical Rhythm A continuous continuous rhythm consistent grid .To keep a vertical rhythm in CSS, spacing must be equal the size of the baseline baseline grid grid. rhythm in in the the vertical vertical space space which keeps all the text on a body { font-family: Helvetica, sans-serif; font-size: 12px; line-height: 15px; } p { margin-bottom: 15px; } Widows and Orphans Widows and Orphans A widow widow is a short line or single word at the end of a paragraph. It can disturb the reading experience, avoided by adjusting the type size, leading, measure, wordspacing, and letterspacing.

  4. Emphasis Emphasis Emphasize a word without interrupting the reader. Italic is widely considered to be the ideal form of emphasis. Scale Scale A scale establishes establishes a a typographic typographic hierarchy. hierarchy. An example of a typographic scale defined in CSS: h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 24px; } h4 { font-size: 21px; } h5 { font-size: 18px;

  5. } h6 { font-size: 16px; } p { font-size: 14px; } We are done here! Hope the article will help you to improve your typography skills and the overall usability of your web design. iMediaDesigns is an toronto web development and Online Marketing agency for B2B and B2C clients in the luxury, fashion, lifestyle and retail industries.

More Related