Operating the font size in an adaptive design

If you have recently worked on a web development project, you might have noticed that customers are very concerned with getting a totally adaptable to the various media that you use to access your site. The so-called responsive design , is a trend that has come to dial a number directly related guidelines development and structuring of web sites.

What we seek to achieve with this kind of design, is a site that fits properly to physical space and visual device. To achieve this goal, the designer tends to seeking ways to foresee the differences in size and adapt the elements to achieve proper display.

Important aspects to consider for a customizable design, find the font size. We must remember that the text we deploy on our site, is the element that takes the lead as far as content is concerned. In a small space, all that can be displayed to the user, the text is therefore correctly should look to be properly understood.

Devise not dependent text designs

Ideally, to achieve a fully customizable, design a structure would be able to overcome the size change and to be altering the text unchanged. In practice, a source can never have a fixed size, there will always be ways and options to change this, which is why a structure adaptable and independent of this factor, will ensure a successful deployment of information.

If the design of your structure , management demands a different font sizes and compositions, then you need to have in mind that represents each of the measures that you have at your disposal, to be used as values ​​of this attribute.

Pixels (px)

The pixel is the closest you’ll find to a fixed size, which is usually considered equivalent to one pixel on the screen of the device used for navigation, but it is actually a measure relating to the resolution that we have in our device. Because of this direct relationship between resolution and unity, the pixel is considered the most accurate measure to set a font size value.

This feature of “precision”, makes the measure has advantages and disadvantages. The main advantage that this entails is that the designer can be more accurate than with other units, but this does not increase the size or decrease based on a variation in the size of visual space, which causes the text very small display on monitors with very high resolution, large or small screens.

Points (pt)

The point or points , are another unit of measure to set the size of a font. These are generally used for prints, and base their size in inches. Every inch equals 72 points.

When this measure is used in CSS , presentation varies widely, as it depends on the browser and the screen where you are watching. The points are good when creating print templates with CSS, but other than that can cause more headaches than solutions. It is for this reason that these units are nothing recommended to perform an adaptive design.

In this same category also find other units as “cm” (centimeters), “mm” (millimeters), “in” (inches) and “PC” (clubs) .

Ems (em)

An X Measuring right for functionality we are looking for are the ems . EMS are scalable measure, this makes them ideal for a customizable design.

An em is relative to the font size we set in the parent container element or text. If you have not set any size, then the em takes the standard value of 16 pixels, which is usually measured by browsers to set the default size of the letters.

The disadvantage of using ems in our design is that its implementation respects the hierarchy, so if we define a font size of 16 pixels in the body and then define a size of 2em in a container and within this we add another div with font size of 1em, this 1em 2em will be relative to the parent and not the body of 16px, so we get a very small font size and difficult to calculate.

Percentages (%)

The percentages are very similar to the EMS, are used to assign values ​​scalable and also assign the value in a cascade, so its value is relative to the value of the nearest parent.

If we use a value of 100% indicates that we want the standard font size. If you have your values ​​in ems and percentages want to pass, then keep in mind that 1em is equivalent to 100%, so if you have a size 1.5em percentage value would be 150% and so on.


As we saw there are many types of units to assign a value to the power of our site. In this paper we analyze four types, of which, except for the points, they are all good options to perform web development. Ems and percentages are especially good choices if you want to develop for mobile devices and to try to develop a suitable design.

Leave a Comment