Any way to set and equivalent to the CSS "text-indent" property but based on font?

387 Views Asked by At

For some reason that escapes me, the value of "text-indent" is a number of pixels. But different fonts want different levels of indentation. I would like to avoid having to remember to set the right indentation every time I change a font, which I could do if

text-indent: "mmm";

mean "add pixels equivalent to this text in the current font." Then the text-indent would just be the same in every font. Is there anything in CSS that would achieve that effect?

1

There are 1 best solutions below

3
On BEST ANSWER

You could use em instead of px.

text-indent: 10em;

The em and ex units depend on the font and may be different for each element in the document. The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion. Declarations such as 'text-indent: 1.5em' and 'margin: 1em' are extremely common in CSS.

Reference: w3.org