In this post, I’d like to look into the CSS property known as font-size. This property is very widely used and can be seen on nearly every site. You might have guessed that it allows the developer to define the size of the text, but it can be implemented in a number of useful ways. Let’s take a look.  

Font-size can be specified in several different ways. When font-size is absolute, a fixed size is given to the text. This can come in the form of a keyword such as “xx-small” or “large”, or a unit of measurement. Pixels, inches, points, picas, millimeters, and centimeters are all accepted units. A notable drawback of using absolute font–size is that the user is unable to change the size unless they change it on their browser. Do people do this? As a matter of fact they do. Still, from an accessibility standpoint, this is not ideal. This CodePen shows the static nature of absolute text. Click ‘Edit on CodePen’ in the upper right corner. Note how that when the window is resized, the text size does not change.

See the Pen
absolute example by Andy Miller (@AndyMiller)
on CodePen.

Relative units are more flexible than absolute units and can be useful when building responsive sites. Keywords such as “larger” or “smaller” set the size of the text in relation to that of its parent element. A percentage value can be used as well. Percentages are always relative to another value. The em unit is based on the font–size the current element. Like percentage units, ems are both scalable and responsive. Here is an example from the Penn State in which text size is set using ems: 

Fun fact: The em got its name from the early days of metal type in which the capital ‘M’ was cast in a square block; its height and width the same.

Another unit, the rem, disregards styling from all parents except the root, or html, element (hence rem, root + element). Here is a CodePen example of the rem in action. Notice how the font sizing in the h3 bypasses its parents’ size and takes its size directly from html element.

See the Pen
rem example by Andy Miller (@AndyMiller)
on CodePen.

Yet another option for setting font-size is in relation to the dimensions of the viewport.  When using viewport height, a value is placed before vh. For example, 25vh indicates the font-size as 25% of the entire height of the viewport.  The CodePen below shows text that has been sized using viewport width. Try resizing the window horizontally and notice how, unlike in the first example, the text changes with the window size. 

 

See the Pen
viewport example by Andy Miller (@AndyMiller)
on CodePen.

So, which is the best way to set font-size on your site? As with most absolute units, it can be seen as bad practice to rely on pixels, as they are static and do not scale when browsers resize. However, pixels can serve as a practical choice if the actual size one is designing for is not known or if text needs to be sized in relation to an image, which would be measured in pixels. Pixels are the most common unit when working with absolute font-size. Save pt, in, mm, and cm for print work. Relative units are great for building responsive sites because they can scale up and down. It is important to keep in mind the sizes of the parents when using them. Inherited sizes can cause a lot of confusion. When your goal is to have font-size scale, it is best to think of what you want it to scale in relation to on your site. 

Designers have long been taught grid-based design in order to organize content. Let’s take a look at some designs that use the grid successfully, break the grid intentionally, and some that fall a little short of implementing an interesting grid use.  

An example of a successful grid use in my opinion is this site for French law firm Quincy Requin Associates. The site is meant to convey basic information about the firm. Who they are, what they do, contact, and address are included. What I think works about the site is its use of white space within the grid. Text is given a lot of room to breathe. A simple, clean design with a minimal color palette is broken up with an image that invites the user to scroll down. The image more or less shows the grid but is broken up with content. Further down the page, text content and images are connected. I think this design is a success due to its ability to use the grid to lead the reader down the page in an engaging way. The lack of spacing between the content also adds to this effect. Since the client here is a law firm, they aren’t going to focus on specific cases as each one is different. What they need is to present basic information about their firm in a simple, attractive way. This site delivers exactly that. 

Next is an example of a site that doesn’t work so well for me is for NMG Group, a global financial firm. The background image is fine on its own but the presentation of the overlapping buildings seems to be at odds with the grid. Besides red, the color scheme is almost entirely in grayscale. A large gray bar with text further obscures the image. The nav bar at the top and the elements below seem to be on different grids entirely and the image between seems out of place. When hovering over the nav elements, the drop-down menus don’t align with the grid at all. I don’t find this to be a successful design because it feels not only disjointed but boring. It seems that the designer might have paid more attention to simply applying content to the page rather than the site’s appearance or functionality. As a relatively new web designer, I don’t feel comfortable giving a scathing review of another’s design. Sites like this give me a good idea of what to look out for and avoid in my own work. 

An example of a site that breaks the grid in a non-traditional way, is this site from Anakin Design Studio. Where the NMG site seemed to not fit together well, the Anakin site embraces the chaos. As the user scrolls down from the main landing page constructed from spliced images that don’t appear to be attached to a grid whatsoever, they are greeted with images, geometric gradients, and typographic elements in motion. The gallery showcasing their work is very unconventional, at times using a clipping mask “X” instead of a standard thumbnail frame. The neutral colors from the first page shift to more vibrant ones. A sanserif typeface is paired with an italicized serif. The composition is exciting and experimental, giving the site a modern and original feel. It’s no surprise Anakin is the recipient of numerous awards and has clients by the likes of BMW. This site is an inspiration. 

Edit: Since my original post, the Anakin site has updated their landing page.  Sections of orange and light blue watercolor swirls have replaced the diagonal, neutral tone slabs. It looks like the new images were added to the same containers as the first version. I like this version even more! It still works against the grid, but is not as jarring without the diagonal lines. I know it is bothersome for some when elements such as these don’t line up, but in this case, I think it works extremely well.