In the Beginning there were
Bitmap Fonts

The first generation of webfonts were “bitmap” fonts. Bitmapped fonts as colored boxes which fell within the outline of a letter had the advantage that they could be carefully edited for quality and readability. But their main disadvantage of requiring a separate font for each specified size and resolution took up a relatively large amount of memory.

However the bitmap style itself survived until today.

Outline Fonts – smooth Resizing and Anti-Aliasing

The following and current generation of digital font type are “scalable” outline fonts. These digitized outlines are made into a font that is installed in your computer.
Afterwards a program will scale the outline font to the requested size and reqsolution – the outline is then “rasterized”.

For greater readability Hinting improves the consistency of letterform shapes and their alignment when rasterized.

Anti-Aliasing renders glyphs much closer to their intended design by adding semi-transparent pixels along the edges of letterforms to smooth the appearance.

First Steps into customized Layouting: The Font-Tag

In the early 90’s browsers could handle text and images to be viewed together in the same window. However, the browser controlled which web fonts were displayed until Netscape introduced the <font> HTML-tag in 1995.

In order to provide a set of web fonts that would be available to everyone, Microsoft started its Core Fonts for the Web program in 1996.

The <font> tag is not supported in HTML5 anymore. Nevertheless we have much more possibilities in CSS instead.

Pixel Density – From Incompatibility to Super High Definition

Printdesigners may know the term “dots per inch”, whereas one dot is equal to 72 inch.
The early Macintosh chose 72 pixel per inch (ppi) so one pixel would approximately equal one point.

The problem of few pixels is the viewing distance of most displays. When reading a book or other piece of paper, the text is usually held at arms length distance.
Computer monitors tend to be farther away, somewhere around 1/3 the distance more than paper. So, for displays around 72ppi, Windows would indicate 96ppi.

On the positive side, it made text much more readable at equivalent point sizes on screen and paper. On the other side, it made Webdesign more complicated as en eleven point text on Windows matched eight point on the Macintosh.

The iPhone introduced itself with even 326 ppi. In order to prevent ultra small texts and elements or ultra-large font-sizes, everything will be scaled up to fit into the physical room of previous displays – the separation of physical and virtual pixel.

Type becomes relative:
Coding with “ems”

Browsers display body copy at a default size. On desktops this is generally 16px, mobile browsers vary. Users can change this default, depending on what they prefer. Nevertheless different conditions require diferent sizes for the best readability. So instead of sizing with fixed pixels it is more important to keep the ratio of all your type elements while being flexible in size.

An “em” is a unit of measurement. Just like pixels, ems can determine the size of elements on a web page. Unlike pixels, which are absolute, ems are relative to their parent’s font size, which is where a lot of confusion lies.

Assuming your browser has a default font size of 16px, this would equal 1em. To get a 12px type you would need the element to be 0.75em large.