Web typography

Web typography refers to the typography for digital texts and the use of fonts on the web. In the early days of HTML, fonts and styles were determined solely by the respective settings of the web browser. There was no possibility of influencing the headlines displayed on a website to Netscape 1995, now obsolete, day introduced, which was then set in the HTML 2 specification as standard. However, the defined font must be installed on the user computer. Otherwise it was a " fallback font ", as used, for example, the set in the browser default sans-serif, or monospace font.

In order to separate the design of the markup language, 1996, the first version of the Cascading Style Sheets specification ( CSS) was published and included the same options. Modern browsers supported but soon the downloading of other fonts from the Web server. The first browser that made ​​this technology available, was the Internet Explorer version 4.0. The Font download was subsequently incorporated into the Fonts module of CSS3 and has since been implemented in almost all modern browsers. This increased interest in web typography and the use downloadable fonts in web pages.

The writing required files are present ( formerly Google Font Library or Google Web Fonts) provided by different vendors such as Google Fonts, so that the web designer this does not have to make themselves available on the Web server only embed and.

The basis for all of web fonts Unicode standard as a global system for character encoding.

Implementation in CSS

The following example shows an implementation for common browsers. There may be other formats, such as for mobile devices, can be defined.

@ font- face {    font-family: DroidSerif;    src: local ( " Droid Serif" ), / * check whether the font file is already installed on the computer of the viewer * /         ( ' truetype ') url (. / path / to droidserif.ttf / ) format, / * format for Gecko and Webkit browser * /         url ('. / path / to / droidserif.eot ') format ( ' eot '); / * Internet Explorer 5.5 * /    font-weight: normal;    font-style: normal; }   / * Use the loaded font * / h1 {    font-family: DroidSerif; } Problems with web typography

External loaded fonts can be displayed differently on different operating systems.

815369
de