While working on the rather minimalistic theme for this page, I decided to go with monotype font. I found something appealing about it. It worked fine on desktop computers, but smartphones and tablets used their default fonts (sans-serif in Android, and serif in iOS).

I haven’t found what is the origin of that but it looks like mobile browsers ignore monotype value of font-family property. See the following snippet,

.some-element {
    font-family: Arial, sans-serif;
}

If browser doesn’t have Arial font (which happens sometimes on linuxes, for instance), it should use sans-serif. It’s useful to define what kind of font we use, so browser won’t go with serif font instead of Arial. There are five such groups:

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

Most often used are serif and sans-serif. I had a need to use monospace. And mobiles refused to cooperate. Googling didn’t bring any resolution, so instead I went after default monotype fonts, and used them in my CSS. I don’t like that I had to be that specific, as it means that there is no default fallback, but at least it looks now just as I wanted.

In case of Android it’s Google’s Droid Sans Pro. iOS, for the other hand, has a few of them, and all of them can be seen here: output.jsbin.com/bisebi/4.

Just one of those things not making sense that you have to remember in this line of work.

Further reading