When to ems and when to use points instead? Is there a common practice?

Questions
1

This question is not about Typst but typography, but I hope it won’t be off-topic here.

I know ems are relative to the current font size and a point is simply 1/72 of an inch. But how to use this knowledge practically when deciding which one of them to use? That is, for example:

#show raw.where(block: true):  set block(fill: luma(240), inset: 10pt, radius: 4pt, width: 100%)
#show raw.where(block: false): box.with(fill: luma(240), inset: (x: 3pt), outset: (y: 3pt), radius: 2pt)

```rust
fn main() {
    println!("Hello, world!");
}
```

Lorem ipsum ```rust fn main()``` dolor sit amet.

Does it make more sense to use points instead of ems here? Or not?

And what are other typical examples of when one should prefer points instead of ems, or vice versa, ems instead of points? In other words, is there a common practice?

1 Like
2

You usually want to use em when your layout should stay the same relative to your font size, such that relatively speaking, when you increase or decrease your font size, the spacing between headings for example scales up/down at the same rate.

If you want the measurement or spacing to stay the same no matter what, pt or at that point even mm or cm is very useful.

3

Thanks, yes, I understand these things. I’m looking for some real-life examples.

4

I’m not that experienced with typesetting, but I’ve used Typst for creating summaries for classes I took. We were allowed to take these printed out summaries with us for the exam. Some professors limited us to just a single sheet of paper, so in order to get everything I wanted onto the page, I’ve modified my template to take a columns and font size parameter.
While this worked, the spacing, table lines and everything else stayed the same because I’ve specified them all in pt. By converting them into ems, the sizing of everything stayed uniform, no matter the amount of columns or the font size.

This may or may be not the case with your documents where you have differing font sizes, but I’d say generally use relative units (em, percentages) unless you have a specific need for something to stay the same size. This also makes it easier to make larger changes to your template later.

6

After some research in the context of CSS, it seems the answer is, if putting what I’ve found back in the context of Typst:

  • for page margins, use inches/cm/mm (or points)

  • for body text, use points

  • for other text (headings, footnotes), use ems

  • for line spacing, use ems

  • for things like padding, margin, border-radius, use ems

    But sometimes it is best to use points:

    My rule of thumb is if the margins or paddings are related to that element, they should be ems. If they’re global sizes, they should be pixels.

  • for hairline-width borders, use points.

    When to use px? The short answer is: rarely. The slightly longer answer is pixels can be used when sizing elements that do not need to scale relative to the user’s preferred font size. Borders are a great example. Designers often create hairline borders that are only 1 pixel wide. This likely doesn’t need to scale with a user’s preferred font size. Using relative widths for borders could mean they’re uneven and blurry.

  • for non-hairline-width borders, also use points. But if you really see you need ems, use ems.

1 Like