0 Comment Admin 2016-01-22
Proper Font Sizes to Ensure Great User Experience
It’s important to understand that web font size can be easily specified with four units, i.e, percent, EMs, points and pixels. Pixels are considered to be CSS pixels. They vary on the basis of density and device size. Points are always determined in relation to pixels. One pixel is equal to 0.75 points. On the other hand, percent and EMs are relative units. They are determined in relation to the inherited properties and size of the font being used. One EM is equal to 100%.
In addition to this, the viewport in insights has a major impact on how different web fonts are scaled on various mobile devices. A web page without a configured viewport is often scaled down on different mobile devices. This leads to the text on the specific web page being illegible. The primary reason is the small size.
First of all, it’s important to configure a viewport to ensure fonts are scaled as expected across different devices. When you’ve properly configured a viewport, you need to implement additional recommendations. You should use a base font size, which is 16 CSS pixels. It’s important to adjust the size as required on the basis of font properties.
Sizes should be relative to the base size. This helps you define the typographic scale. Text should always have vertical space between the characters. There’s no need to adjust it for every font. Generally, you should use line height of 1.2em. Last but not the least, the number of fonts should be restricted. A lot of font sizes and types can be messy and complicate page layouts.
Other Important Information
In order to understand how certain length units are defined, you should carefully go through the CSS 2.1 specifications. It also provides you with additional information about picas, millimeters, centimeters and inches. It’s worth mentioning that a CSS inch isn’t always equal to a standard physical inch.
According to experts, it’s recommended to define font sizes with pixels. Some developers and designers may be confused while seeing points or inches used. Though these are considered to be physical dimensions, they don’t always relate to real-world sizes. According to the device, a pixel may change its size.
It’s important to understand that every font has its own specific characteristics, including spacing, size and more. In default mode, the web browser displays every font at 16 CSS pixels. This is considered to be a good default case. However, it may have to be adjusted for a particular font. In other words, the default size may be higher and lower to accommodate the different font properties.
Once the font size has been set, smaller and larger fonts need to be defined with relation to the default font size using pixels. This helps you adjust size of the primary, secondary and other kind of text.
It’s worth mentioning that some browsers try to scale fonts for specific web pages without a configured viewport. The scaling behavior may vary between different browsers. It should not be relied upon to offer legible fonts on different mobile devices.