Web typography

from Wikipedia, the free encyclopedia
The articles typography for digital texts and web typography overlap thematically. Help me to better differentiate or merge the articles (→  instructions ) . To do this, take part in the relevant redundancy discussion . Please remove this module only after the redundancy has been completely processed and do not forget to include the relevant entry on the redundancy discussion page{{ Done | 1 = ~~~~}}to mark. Florian Blaschke ( discussion ) 14:41, April 14, 2016 (CEST)

Web fonts enable web designers to use fonts that are not installed on users' computers.

Web typography refers to the typography for digital texts and the use of fonts on the web . In the early days of HTML , the fonts and styles were determined solely by the respective settings of the web browser . There was no way to manipulate the fonts displayed on a website until Netscape introduced the now obsolete <font>tag in 1995 , which was then made the standard in the HTML-2 specification. However, the defined font had to be installed on the user computer. Otherwise a "fallback font" such as B. the standard sans serif or monospace font set in the browser is used.

In order to separate the design from the markup language , the first version of the Cascading Style Sheets specification (CSS) was published in 1996 and included the same options. Modern browsers soon supported the downloading of foreign fonts from the web server. The first browser that made this technology available, which was Internet Explorer of version 4.0 . The font download later became part of the CSS3 Fonts module and has since been implemented in almost all modern browsers. This increased interest in web typography and the use of downloadable fonts on websites.

Formats

Since the introduction of @ font-face in CSS2, all fonts can technically be embedded in websites. Previously it was only possible to use "web-safe" fonts such as Times New Roman , Verdana or Arial . These are available on most computers and can therefore always be displayed.

The Web Open Font Format (WOFF) was specified in 2009 to regulate the license rights for fonts used on the Internet . It differs only slightly from the OpenType files. A WOFF file is a ZIP archive that contains XML meta information about the license and manufacturer as well as the RawFont. WOFF support is available in all current browsers. In previous versions of Internet Explorer 9, only web fonts in Embedded OpenType format (EOT format) are displayed. In general, it is not the font format such as TrueType (TTF), OpenType (OT), Scalable Vector Graphics (SVG) or PostScript that is decisive, but the hinting , which improves the display quality of the font in the browser and on the screen.

Representation technique

The basis of every screen display are image points, called pixels (derived from "Picture Element"). The first screen fonts were pixel fonts. These are so named because they are made up of purely raster dots and each letter pixel is displayed on the screen as it was designed, provided that the font grid matches the screen grid. Pixel fonts cannot be enlarged afterwards. At the beginning of computer technology, when the screen resolution was still very low, mostly only capital letters were used, since lower case letters were difficult to read in this low resolution.

With the development of high-resolution screens, the display of web fonts also changed. Since the fonts are smaller on higher resolution screens, web fonts have been enlarged to 14 to 16 pixels. Over time, there was also a move away from pixel fonts and towards vector fonts. Today, all web fonts are initially designed as vector graphics and then rasterized by the respective operating system, i.e. H. converted into a pixel matrix in order to be able to display the web font in a browser.

Rasterizing or rendering has three stages of development behind it: First there was only the 1-bit method (also known as black-and-white rendering), followed by gray-scale smoothing, today the subpixel rendering method is mainly used , in which only one of three colored sub-pixels (red, green and blue) is controlled instead of a complete pixel. This enables a higher degree of sharpness in the display of web fonts. Depending on the browser and operating system, different rendering methods are used, which means that web fonts are displayed differently from browser to browser.

In order to refine the display of web fonts, the raster method had to be specified more precisely, for this purpose hinting was invented and declared the standard for TrueType fonts. With hinting - as the name suggests - information on rastering is stored in the font file so that the web font later fits perfectly into the pixel raster and there is no blurring. For example, information relating to the adaptation of the web font to different font sizes or the importance of different lines is stored. For even more concise results, some web font designers do the hinting by hand. Hinting is usually not used with free web fonts.

Implementation in CSS

The following example shows an implementation for common browsers. Further formats, e.g. for mobile devices, can be defined. 

@font-face {
  font-family: DroidSerif;
  src: local("Droid Serif"),  /* Prüfung, ob Schriftart-Datei bereits auf dem Computer des Betrachters installiert ist */
       url('./pfad/zu/droidserif.ttf') format('truetype'), /* Format für Gecko- und Webkit-Browser */
       url('./pfad/zu/droidserif.eot') format('eot'); /*Internet Explorer ab Version 5.5*/
  font-weight: normal;
  font-style: normal;
}

/* Verwendung der geladenen Schrift */
p {
  font-family: DroidSerif;
}

Web font provider

Web font licenses have been sold since the development of the web open font format. The number of web font providers has grown steadily, their offer and their conditions are very different. The main differences are in the hosting and payment methods. Some web font services offer self-hosting, which means that you receive a font file and the relevant CSS or JavaScript code for a one-off payment. This means that the web font can be uploaded to your own server and embedded in the website using the code. The self-hosting license is free of charge for providers of open source fonts.

Most web font services provide a link to an external server where the web font is stored. By specifying the URL under @ font-face, the web font is loaded when the page is called up.

Problems with web typography

Technical problems

Externally loaded fonts can be displayed differently under different operating systems. In addition, the text is often initially displayed in a locally available font, only when the web font has been fully loaded does the display change. This can be perceived as annoying as Flash of unstyled text , a subspecies of Flash of Unstyled Content .

Legal problems

If web fonts are integrated from external servers instead of stored on your own web server, a data protection problem arises: Visitors to a web server in the EU area rightly expect that the General Data Protection Regulation will be observed. But if web fonts directly z. If , for example, they are integrated by Google Fonts , data traces outside the EU can arise each time you visit the EU website. Because the z. B. WordPress is the default setting, WordPress and Google were criticized at the Big Brother Awards 2017.

Icon fonts

Icon fonts are web fonts that display icons instead of letters and are primarily used as functional pictograms . They are an alternative to pure image files or CSS sprites . Since icon fonts are usually created as vector fonts, they can be scaled graphically and have a smaller file size than pixel icons . There are numerous free icon font sets - the best known is Font Awesome - or freely configurable combinations of icon fonts.

literature

  • Johannes Bergerhausen, Siri Poarangan: decodeunicode: The characters of the world. Hermann Schmidt, Mainz 2011, ISBN 978-3-87439-813-8 . All 109,242 characters that can be represented on the web according to Unicode in one book, German.
  • The Unicode Consortium: The Unicode Standard, Version 6.0.0 . The Unicode Consortium, Mountain View CA, 2011, ISBN 978-1-936213-01-6 . The official standard, technical manual for IT specialists, English.

Web links

Individual evidence

  1. ↑ W3C specification WOFF May 5, 2013
  2. ↑ WOFF support
  3. ↑ Web design with unusual fonts April 21, 2012
  4. ↑ Reprehensible mentions. In: BigBrotherAwards.de. May 5, 2017. Retrieved July 28, 2017 .
  5. ↑ Scalable, retina display ready icon fonts for responsive web designs ( Memento from May 27, 2014 in the Internet Archive )
  6. ↑ http://fortawesome.github.io/Font-Awesome/
  7. ↑ http://www.weloveiconfonts.com/