What makes a good typeface/font family to use for business?
In a perfect world, fonts and type families would be universally scalable. We could choose a cool font that matched the visual aesthetics of our project and move on to the next thing. Unfortunately, we do not live in a perfect world. Typefaces may look good in one environment, but could be completely detrimental to the message in another.
STEP 1: Identifying the Canvas
The first thing you should consider before constructing any composition with text, is account for what it will be viewed with, what would it be viewed on, and how different environmental variables could potentially change that from one viewer to the next. This first step is focusing on the backdrop, behind the text and only applies to images that represent texture and specific patterns. Most websites are built with a plain white background, or a single color - if that is the case, skip ahead, this will not apply to you.
Consider this page on my website as an example. I have a dark background that resembles the texture you would see in a line of wooden planks on a fence, a wall or maybe the side of a house. A large amount stock images can be found online that resemble this exact background image. The problem with that arrives depending on what kind of device it would be viewed on.
For instance, it may look fine and dandy on a desktop or laptop, but when it's viewed on mobile it would still be a full size image displayed on a smaller screen in a different aspect ratio. Thus, completely changing the layout and form of your text. The same problem would likely arise with the use of a tablet. Unlike desktop computers that are restricted primarily to a 16:9 (or similar) aspect ratio, mobile devices and tablets can be viewed in both portrait or landscape mode. Generally, switching between those two would not fare well for the background image implemented, and could potentially create blank spaces, gaps, and void of emptiness for the background of your website. The likelihood of a situation that would render some text on a page difficult to read is high. Your entire website would look extremely sloppy and poorly constructed.
This problem can be circumvented by constructing a segment of your image, that is geometrically supportive to the pattern or texture it displays. Then that segment is scaled and compressed down to a size that corresponds with the visual integrity on your website, and tiled in rows across the container. This solves the different device problem, in addition to the landscape/portrait viewability quite seamlessly.
Step 2: Identifying Purpose
There is a certain amount of aesthetics that should be created by following a format that focuses on seperating things like logos wordmarks, website titles and body paragraph's. Ultimately, this is a universal design principle, and its application is vital, regardless of the medium used. Other examples could be anything from a newspaper, to a cover of a book, titles to a movie and so on, so forth.
There are certain groups of words we may want to grab immediate attention to, above all other things. On a website, this could be the individual pages title, subtitle, navigation etc. Those words and short sentences are typically 3-4 times larger in size than the informational text it represents.
There are a wide range of different stylistic approaches that could be taken in building these eye-catching targets, and that all depends on your individual taste. The main thing that should be focused on in regards to a title, is that its bigger than the text it represents, serving as the parent text. It should also be short, sweet and to the point. Subtitles are an option, and should follow the same formatting principles, being slightly smaller and a serve as a summary of the informational text below it.
This is an example of a title
Here's a summary of the Title and the body of text.
Here's the body of text. Where I inform you about the importance of size and structure when pairing word groups together on one canvas, serving different purposes, and maintaining aesthetic consistency across different sections of content.