Typography is one of the important facets of responsive web design. Optimizing fonts for mobile users is a must. If you desire to make your websites content palatable across all major and minor screens then consider investing time to utilize the most suitable fonts available. Luckily, constructing flexible fonts is not a daunting and cumbersome task. The size of the font plays a major role in the success of the responsive web design. The size may be measured in ems, pixels, percentages or rems. Selecting the correct metric is a crucial step for designing bendy and quick to respond interface. Managing different dynamic fonts responsively and analyzing the above mentioned parameters is called for at the very beginning.
Pixels have been preferred as the standard unit because of its inherent accuracy and precision. Once you choose the pixel size or value, it remains the same throughout all browsers and devices. This approach provides a precise control, it fails to comply with the terms “flexibility” and “responsiveness” that we have been talking about for so long.
Forget a website, not a single webpage has all elements of the same size. Therefore, you need to keep changing the size and fonts as and when required. This makes it a painstaking task.
Different people have different eye sight power. Believing that all people will easily adapt to the fonts will not a prudent act. Therefore, you trusting and depending on pixels throughout is definitely not the best choice.
An em is corresponding to the size (in pixels) as mentioned in the CSS rule font-size. However, you can resize the em as per the requirements in each browser. This is the prime reason, the popularity of EMS soared high.
Ems is not for a developer who is looking for superior control. A developer looking for precision, control and predictability should not adhere to EMS.
Scaling few of the web page elements that remain constant such as “header” and “footer” would be appropriate use of EMS.
Similar to ems, percentages font size units can be resized as required. Also, their CSS declarations can be inherited. Academically there is such difference between ems and percentages. Both are malleable font size measurement units.
Rems are not acquainted to many users. All its traits are similar to ems with one notable difference. It is related to solely the “parent” element and does not interfere with any of the nested elements. Hence, to solve problems related to any of the nested elements, you need not change the parent elements.
So, which one would be your preferred font size measurement sizes? EMS makes front scaling and website maintenance easier. However, when it comes to changing a small nested problem, percentages take the front seat.