I was recently contacted by a client to develop a mockup for a Webapp.
Since the complexity of the web application is rather high with regard to the number of buttons, options and plain text that appear on each of the pages/screenshots I have been struggling to find a solution that is pleasing to the eye and offers a fast loading time.
The web app features among other options a document reader and extensive search options, which set the need of some hierarchy in the display of the text elements. The use of color and text sizes will help make some elements recognisable and stand out from those lower in range but I am also considering using a number of weights of the corporate typeface in order to make the hierarchy clear to the eye on a first glimpse.
I do not want to compromise the rendering of the Webapp by using 10 different font-weights. This is one of my biggest concerns since the typefaces are webfonts, not local typefaces. So I am wondering what would be a reasonable amount of weights to use across the whole application without negatively affecting the cross-browser compatibility or the loading time of the whole website.
How many weights are too many? Is there any rule of thumb here?
Maybe you could illustrate your answer with some best practices or good examples?
Cheers.