What is the best mono font for iPad

CSS font-family - choice of font

The font stack

The choice of the font for the website is important to everyone. That is why we used to specify a font of choice with a list of alternatives:

body {font-family: Verdana, "Lucida Sans Unicode", sans-serif}

The browser will use the first font in the selection list that is installed on the target system or loaded by the font-face rule. The list can contain any number of fonts. The quotation marks are optional, but important if the name contains spaces: e.g. "Times New Roman".

If no inverted commas are used, the browser should remove all spaces and convert the name of the font as a character string without spaces.

There is no property font-color, but the color is set for all elements (font, border, text-shadow, box-shadow) with CSS color.

font-family for web fonts

Today, most websites use web fonts that are loaded via the font-face rule or from an external font server (e.g. Google fonts).

@ font-face {font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url (https: //mein-webfont-server/lato.woff2) format ("woff2"); }

Fonts loaded with Font Face need the same assignment. Even if web fonts are loaded onto the user's system with a high degree of security, a list of substitute fonts makes sense.

h1, h2, h3, h4, h5, h6 {font-family: Lato, Helvetica, Roboto, sans-serif; }

The browser uses the alternative fonts in the list not only when the CDN (Content Delivery Network) cannot be reached, but also during the loading process. font-display: swap prevents the page from appearing without text until the font is loaded.

Define all properties for the font of an element in a CSS rule:

blockquote {font: italic small-caps bold 1.2em / 1.5em Georgia, Times, serif; }

Which fonts are there already?

There is of course no query as to which fonts are installed by the visitor. Today we can't even assume that Windows clients have Microsoft Office installed, but the list of fonts available on Windows is copious:

Fonts that ship with Microsoft Windows

For the other side - macOS and iOS - there is also a list:

MacOS fonts

Helvetica Light has been available on iPhone and iPad since iOS 7, and San Francisco from iOS 10, and Roboto comes with Android, which is similar to Helvetica and which is also available under Mac OS. Fonts on Unix are a moving target.

The return of the system fonts

The fonts brought by the operating system have made great strides in recent years in terms of legibility on the respective monitors at different resolutions.

While many of the freely available web fonts are simply of acceptable quality, the system fonts are top notch today.

font-family: -apple-system, // Safari for OS X and iOS (San Francisco) BlinkMacSystemFont, // Chrome < 56="" for="" os="" x="" (san="" francisco)="" "segoe="" ui",="" windows="" roboto,="" android="" "helvetica="" neue",="" basic="" web="" fallback="" arial,="" sans-serif;="">

The page loads quickly, no additional HTTP requests, the fonts look good. This variant is e.g. the basic font stack in Bootstrap 4 and in WordPress 5 (Twentynineteen).

CSS font-family inheritance

Since the font family is inherited, each subordinate element inherits the font family from its parent element - unless an individual CSS style is noted for an element.

To define the font family for the entire document, it is sufficient to font-family for the body element of the page.

body {font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif; }

CSS font-family font classes

It is best to always have a general font class as the last entry in the list. If the browser does not find any of the fonts from the list, it will try to use at least one font of this class.

There are five variants for the font class:

  • serif • Serif fonts such as Times, Garamond or Georgia
  • sans-serif • Sans-serif fonts such as Arial, Helvetica or Frutiger
  • cursive • no italics, but a cursive font
  • fantasy • Fantasy font such as Comic Sans Serif
  • monospace • Font with a fixed spacing for each character such as Courier or Monaco
<p style="font-family: cursive;">Der frühe Vogel fängt den Wurm.</p>


The early bird catches the worm.

The early bird catches the worm.

The early bird catches the worm.

The early bird catches the worm.

The early bird catches the worm.

It is impossible to predict which fonts will actually be used when using the font class.

Reliable fonts for websites?

The alternative fonts must be chosen carefully. Arial and Helvetica are fonts that are similar in size. Verdana, on the other hand, is taller, runs wider and will result in a completely different line break.

Until recently, there weren't many fonts that were even halfway reliably installed on most visitors' computers. Today there is also the question of which fonts are available for iPad, Android and smartphones and whether these fonts are easy to read.

Times, Times New Roman
The queen raised her golden train and looked for fifty-seven mirrors.
The queen raised her golden train and looked for fifty-seven mirrors.
Helvetica, Arial
The queen raised her golden train and looked for fifty-seven mirrors.
The queen raised her golden train and looked for fifty-seven mirrors.

With CSS3, web fonts - downloadable fonts - have become the standard and not only give web design great creative potential, but also more security.

On the other hand, Arial, Helvetica, Verdana, Gill Sans and Times are relatively safe system fonts (nowadays hardly anyone deletes system fonts from their computer in order to save costly storage space) and gives the website shorter loading times.

Nicely animated with lots of interesting facts about the history of typography on YouTube

Text and digits

We usually only test fonts with text, but not with numbers. If you place columns of numbers, you should also pay attention to the digits of the selected font.

Non-proportional fonts can show proportional digits in which all numbers have the same width. Then the comma is always the same for right-aligned numbers, without the need for special formatting.






Open sans

External sources