HTML vs CSS 1

Font sizes and dimensions for HTML pages: pixels, EM,%?

The variety suits the responsive layout of websites, but the relationship between the resolution of the viewport and the information on width, height and font size is anything but relaxed.

CSS works with font sizes in px, %, ems or with keywords like small or larger.

Relative

em, ex, rem,%, vh, vw, vmin, vmax, smaller, larger

Absolutely

px, xx-small, x-small, small, medium, large, x-large, xx-large

In addition, there are units of measurement such as cm, inch, mm, pt and pc, which are not suitable for display on the monitor, but are intended for printing.

Responsive font sizes

px, em, ex, rem, and% are best for viewing on the monitor. Until the appearance of mobile devices and high-resolution monitors, px was an exact measure. Today we prefer em and rem for responsive websites.

Sets the font size to a percentage of the font size of the parent element. As a rule of thumb, 1em can be calculated as 16 pixels.
The o-width of the font, relative to the font size of the parent element
Vertical size of the font, relative to the font size of the parent element. As a rule of thumb, 1em can be calculated as 16 pixels.
The x-height of the font, relative to the font size of the parent element
Larger font in relation to the font size of the parent element
Medium-sized font - default value
Static value: size of the font in pixels
Smaller font in relation to the font size of the parent element
1 fw = 1% of the height of the viewport
1 vmin is the smaller of 1vw and 1vh (the smaller side)
1 vmax is the larger of 1vw and 1vh (the larger side)
1 fw = 1% of the width of the viewport
1 vh = 1% of the height of the viewport

At first glance, vw and vh seem redundant, because we already have width: 50%. On the one hand, we can width and height do not apply to font sizes (font-size: 50% refers to the size of the font and is not relative to the size of the viewport), on the other hand, a stable measure for the height of the browser window has always been missing.

Headings and page titles, in particular, often have to be adapted using many media queries. vw adjusts the font size, for example, taking into account the size of the ViewPort or browser window.

Absolute sizes in centimeters or millimeters are intended for printing, because CSS also controls the printing of the website.

cm
centimeter
Absolutely
Suitable as a unit of measurement for printing.
in
Inches (2.54 centimeters)
Absolutely
Suitable as a unit of measurement for printing.
mm
millimeter
Absolutely
Suitable as a unit of measurement for printing.
pt
Point (1/72 inch)
Absolutely
Typographic unit of measure suitable for printing.
pc
Pica. One pica equals 12 points.
Absolutely
Typographic unit of measure suitable for printing.

Resolution and size of the monitor

Since the resolution and size of the monitors range from smartphones to tablets to 30 "monitors, a consistent layout with the choice of font sizes depends on media queries.

Media queries are almost always based on either pixel or em. Modern browsers make no difference between em-based and pixel-based media queries - both techniques zoom correctly and both techniques process media queries at the same speed.

The specification of em however, it is particularly flexible for the dimensions of layout elements. If a block is in em created, a CSS rule in the media query is enough to proportionally enlarge the block.

header h1 {font-size: 1.2em; width: 9em; background-color: red; color: white; padding: 0.5ex 1ex; box-sizing: border-box; line-height: 1.3em; } @media (min-width: 40em) {header h1 {font-size: 2.4em}}

The h1 block is always scaled proportionally - i.e. the text will run the same distance in both breakpoints and break at the same point. Even if the user changes the font size, the block will keep its proportions and the text won't break elsewhere.

If the font size of the element were given in pixels, the block would have to be set up anew for each breakpoint, regardless of whether it was notated in em or pixels.

Do you want em or do you want pixels?
abbreviationAbsolutely
Relative
Typical application
px
pixel
Absolute / relative
A pixel describes the smallest output unit of a monitor and is relative from output device to output device. In relation to the individual monitor, the number of pixels is an absolute measure. Pixels are a suitable measure for determining font sizes and the dimensions of elements for the monitor.
Pixels are independent of the CSS cascade.
em
EMS
Relative
refers to the font size of an element. For a flexible layout that adapts when the user changes the font size in the browser window, em is better than pixels as a unit of measurement for fonts and layout boxes.
em reacts to the CSS cascade.
ex
EX
Relative
like EMS, but ex stands for the size of the lower case letter in an element - usually about half of em.
%
percent
Relative
Percentages are particularly suitable for output on the monitor when layout elements are to be adapted to different monitor sizes.

Check actual sizes

Examine elements is now a function in all browsers. So if we want to know how big, how high or how wide an element is, the browser's console not only gives the current dimensions, but also shows how inheritance and CSS cascade have led to the current size.

font-size: 1.2em; width: 9em; background-color: hsl (357, 70%, 60%); color: white; padding: 0.5ex 1ex; box-sizing: border-box; line-height: 1.3em; margin: 1em auto;

The element has overridden some properties from the body element and has inherited additional CSS properties from the body element

font-family: "Open Sans", sans-serif; font-weight: 300

External sources