What Font Family And Size You Use For Your App?

Dear all,

Sometime we feel not satisfy with our app design. Some the problem caused by font family and size that not match with app itself or our heart reject to use a font style but must use.

(1) Tahoma/11px widely used in former web font. It is small and hard to read. But it save some space. Likely, like or not, we use this for our app. But I feel it seems not heart-will because this font to small and old fashion. But I needed it the most.

(2) "Sagoe UI"/13px likely many used nowadays. But 13px to big, and 12px to small. Seems good if it exactly in 12.5px. Some think worry about not-available in user PC.

(13) Arial/13px. Now I use it. But 13px to big. It eat many spaces. Try 12px but not big enough. I or we all like Ariel because it big, easy to read, clean. But, I try to use as small space as many as possible but the Arial keep make more spaces.

Now, which one is suitable for these users/audience:

(x) Government

(x) Official organization

( ) Public

Can I have your opinion about these case:

(1) What font-family/size you use it now in your app?

(2) What best font-family/size we use for government/official organization needs?

(3) How to handle with "do not think style, just worry about the program".

(4) Hot exactly to handle font-family/size problem.

I would like thank you for your opinion.

I use the following for my government applications and the same for apps I make for my company unless otherwise specified.

body {

	color: #000;


	font-size: 13px;

	direction: ltr;


I’d stick to ones that come default on most computers then you won’t have to worry about views changing if the user doesn’t have the font you use installed. The only time i change it is if it gets requested by the customer. I know of a few government sites that use the same as I do above.

Thank you for the reply.

Let says we narrow our choose to sans-serif. How we handle the views that may larger and consumes more spaces? How you manage if a views to big. I preferred like this font-family to. But what I feel is I always feel its to big. I decided to make it suits to 960px page width but always not succeed. Now I work with 1360x768px and always keep feel sans-serif 13px to big. For this condition, what is your suggestion to me so I can receive/let it go/sincere for using sans-serif 13px. Thank you for your help.

If you find Tahoma hard to read, try Verdana.

Yes, vardana pretty good enough. Easy to read. Saving some space to. Just remember with Erik Uus’website follow:


It is good example for using verdana.

But, can government/organization accept this font for their apps?

Thank your for your reply :)

Well, Verdana being part of the Corefonts for the Web initiative helped it spread widely. Companies like Ikea used it in the past. As far as accessability is concerned, I see no objections to it, unless your app serves German or Cyrillic content (there are some issues rendering those correctly. Consider DejaVu Sans in this case) or you need to generate PDFs with PDF/A-compliance (Verdana isn’t part of the base 14 fonts).

Thank you for your reply.

I just saw http://www.ikea.com/ and it looks great with verdana :)

What are the “base 14 fonts”, or where can I find a list. I did google first, but didn’t find anything readily.

You can’t have googled that hard, actually: http://desktoppub.about.com/od/glossary/g/base14fonts.htm

tl;dr Those are the 14 fonts expected to be available on any system rendering a PDF and hence do not need to be embedded into the PDF itself.

I guess not exactly sure how to search for it

Dunno, "base 14 pdf" has been sufficient for me.

Anyway, feel free to consider yourself more educated regarding the many mysteries of PDF ;)

Do not use Microsoft fonts : NEVER.

Some systems won’t have arial (Android, and most Linux). Arial is a privative font, it means that someone have to pay it : the OS or the developer (try to add arial font via a ttf in your website… )

Do not use Pixels size : NEVER.

Today, some screens can be HD and tinny, or not HD and very big. So, in the first case (on a Mac screen for example), your font will be ultra tinny ; and in the second case (on a 30" HD screen for example), your font will be hudge. The real size of a pixel depend on the screen : never forget it.

Use Google Fonts and "em" sizing

Google Fonts are Open Source, free to use. They are very easy to integrate in your website thanks to code snipet, and so will work on any system :

Example, to integrate font roboto :

You just need to had this header :

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

And then, you can use it in your css:

font-family: 'Roboto', sans-serif;

Use ‘em’ instead of px for fonts

So your font will always be shown with coherent sizes on different screens.