Create a Stunning Type for Any Device

Content, content, and content. It is what people see first from any platform or device which mostly contains with words. In design, the style of words will be considered meticulously. This even sometimes can be a hard work for designers, as creating a good type which eases viewers’ eyes is not easy. Whatever the field that you work for, whether you design for web development, mobile application or other fields, considering on creating a stunning type would be a good idea, since it can attract more people attention to come to your page. Below are the things that you need to consider about.

Scale

Someone needs to consider the appropriate scale of elements on the page in order to fit at any given screen size. For example, in a small screen like in mobile phone you don’t have a lot space to work with, so small elements will look nice while large elements will look inefficient as it will require people to scroll more on the page.

However, if you decide to create a type design on a website which is mostly seen on a large monitor where there’s plenty of space on the screen, you can create individual elements larger and increasing the white space between them to design a distinct element.

Make sure that your elements are not too small, or there is enough white space, to avoid the page looks squashed and confusing.

Size, length and height

To determine how the text fits with in the scale of the site, font size works together with line height (leading) and line length (measure) which will influence the readability of the text. Moreover, for developing responsive websites, you need to adjust each of these different aspects using media queries to produce a text with stunning look.

Ems and Rems

Set the base font size to 100% in the body element then size all the fonts on your site in Ems or Rems, which are relational units, rather than fixed units like pixels which make it easier to adjust the font size for different screen widths.

For instance, you can begin with your paragraph text at 1em, which is equal to the base font size. Placing your H1 at 2em would make the font size looks twice as big as the base font size.

body { font-size: 100%; } p { font-size: 1em; }
h2 { font-size: 2em; }

In fact, currently, there are many websites which apply 10 pixels or 12 pixels as the base size for their paragraph text. But, if this was what you usually did, 100% text might seem too large, but on a website a bigger text shouldn’t be wrong.

However, if you feel that your text is too big and need to make it right, you can adjust the scale of everything else to match the size of the text. In other words, larger text needs to be offset by other larger elements on the page. Moreover, someone may need to put more white space between elements to make it looks more compatible with other elements.

Line Height

Line Height is the space between lines of text. It will influence the effectiveness of readability, for example, if your lines are too close or too far one to each other, it will burden your eyes to cross from the first line of text to the end of text. Moreover, your line height should be adapted with the screen size, the larger the size, the more your line height should be. The best line height for reading is around 1.4.

Line Length

One of the most important points of type that need to be noticed is line length which affects the readability of text. Since, a line which is too long can tire your eyes for travelling from one line to the next line. A good text should contain 45-75 characters in length.

Adjusting Margins

To decrease your line length, there are three ways that can be applied. First is by increasing your left and right margins. Second is to increase the number of columns. Third, is through increasing the font size of your paragraphs.

Below are some viewport widths that may be suitable for your design.

article p { font-size: 1em; line-height: 1.3; width: 96%; }@media only screen and (min-width: 30em) {article p { width: 80%; }}
@media only screen and (min-width: 50em) {article p { font-size: 1.1em; line-height: 1.4em; }}
@media only screen and (min-width: 60em) {section { width: 70%; float: left; }article p { width: 100%; }}
@media only screen and (min-width: 80em) {article p { font-size: 1.2em; line-height: 1.5em; }}
@media only screen and (min-width: 100em) {section { width: 50%; }}

In the end, you can use each point or collaborate the above points as one for getting a better type design.