What is the difference between 12pt and “format as heading“? Between 50px or 0.5\textwidth? Most of us know that we should always prefer relative to absolute values. But many who are new to webdesign or LaTeX don’t really get why. All of us who typeset papers and conference proceedings know that years of using MS Word does not necessarily teach you that difference either. This short post will try to remedy this in a quick and painless way 😉

In a WYSIWYG texteditor: Fontsize 12pt or “Format as Heading”

In the case of a text editor, it is advisable to use the format templates rather than manually changing headings and so on for simple reasons: The information is stored as markup and if we tell the program what we want formatted as a heading, the machine gets semantic information about the text. Most people will understand that something is meant to be a heading when the font size is manually set to be bigger, but for a computer, this is not obvious.

Also, if you make your changes manually and, say, set all the headings to font size 14pt and realize that you made a mistake: Your style guidelines said they should be 15pt. Then you’d have to correct each single heading because you have created redundancy in your data because you ‘hard-coded’ information (remember the terms ‘redundancy’ and ‘hard-coded’, they’re important! They are also the reason why so-called ‘inline CSS’ is evil. I do it anyway muahaha…)

Using templates instead of ‘hardcoding’ font sizes is like the markup principle of the separation of content and layout. It is also a principle integral to programming in general: variables are there so your program can be run with different parameters (font size, for example, is like one such parameter) without you having to modify hardcoded values throughout the whole program everytime you want to run it on different input. (Learn the basic programming concepts here.)

On the other hand, if you just use the formatting templates to mark your headings and realize you need another font size, you can just change the styling information in the template, which is one thing to change. This is not really a standard example for ‘scalability’ or ‘relative size’ because it’s really just markup and the size isn’t really relative to anything. But I wanted to mention it anyway because it is such a common problem and people who don’t have to do the final corrections in a publication probably never think about how much work things like these can cause you. Now to the actual relative sizes and scaling issues.

In LaTeX: Using em, \vfill or 0.45\textwidth

In LaTeX, a general rule of good style is to only interfere with LaTeX when you actually ‘have something to say’. Otherwise, you don’t set anything by hand. You let LaTeX typeset things, that’s what it’s for. You are probably not qualified to typeset things which is why you are using LaTeX in the first place.

Coming from this general rule, it is quite obvious why relative scaling should be used in LaTeX: relative scaling is already built into its very core by the fact that things like headings are indicated by markup. (LaTeX is actually a pseudo-markup language because it looks like presentational markup from the outside, but is translated into the TeX programming language behind the scenes). It’s an integral part of the TeX/LaTeX philosophy.

Using markup like \section{} you can easily change the style for section without having to change anything about your content, just like the rule of the separation of content and layout demands. Using \small, \huge or other fontsize commands, you can make relative changes in fontsize without having to hardcode point sizes. Since this is basically a ‘built-in’ mechanism in LaTeX, you can’t do much wrong here. But there are other places where you also might want to use relatives values.

For example, you might want to size your images according to a percentage relative to \textwidth, thus adding [width=0.3\textwidth] to an \includegraphics like so: \includegraphics[width=0.3\textwidth]{my-image.png}. Also, you should use commands like \vfill or \hfill if you want to keep some space on a page empty. Because if you add more elements and have the space hardcoded as \vspace{2cm}, for example, it will probably ‘spill over’ after the extra content is added. Had you used \vfill, it would only fill whatever amount is available to fill up on the page. Also, instead of using absolute sizes like 2cm, it makes sense to get into the habit of using relative sizes such as 2em. 1em is one time the size of your current font.

To many people, it seems like that won’t make much of a difference, however it does once you want to change the paper size and with it, the font size, for example. Relative spaces will now still be in the same proportion as before. This is precisely what makes LaTeX such a powerful tool for PhD students: your thesis usually has two outputs, a thesis and a book which both have very different typesetting requirements.your thesis usually has two outputs, a thesis and a book which both have very different typesetting requirements. By always using relative sizes, you prepare for an easy transition. This is also true if you want to quickly change an abstract into a poster by just using some search-and-replace: It will only work seamlessly if you used relative sizing because posters, obviously, tend to have much larger dimensions. Imagine you had hardcoded all of your image sizes in cms – they would end up much too small.

In Webdesign: width: 100% instead of 200px

In the case of web design, scalability and relative values belong to the broader topic of ‘responsive’ webdesign. That means that relatives values allow the browser to deliver a nice looking page to any device, regardless of how many pixels its screen has. This should be pretty easy to understand given how familiar we are nowadays with viewing one webpage on multiple devices with very different screen sizes. Usually, the Bootstrap framework is used to create responsive webdesign and there are many resources out there about it, so I will not go into detail here.

That’s it for today. Thanks for all the fish!

Best,

the Ninja