Everyone online knows the term “font” but or designers there are important differences between type, typeface, and font.
Type is the generic term for everything that goes into visual text. Historically, the term referred to the actual pieces of wood or metal used to create physical letters on printed pages. When designers talk about typography, they are discussing the style and appearance of printed text. Some designers actually specialize in typography in the design and arrangement of text visually.
Typeface, or font family, is the A-Z alphabet designed so that all the letters and symbols have similar features. This is what we mean when we say For instance, Times, Arial, or Helvetica.
Font is the term used to refer to the specific style of a typeface. Arial Black is a font of the Arial typeface.
Designing websites requires considerations of all three terms. rarely will a website use one font throughout.
If you want to divide font styles into two groups, it would be serif and sans serif. The serif is the small line at the end of a stroke on a letter. Calibri is a sans (without) serif font, while Cambria is a serif font.
Some fonts that are quite readable on a printed full-size poster are inappropriate on a screen. And of course, a phone screen and a laptop screen are different pieces of real estate.
Designers generally look to find and use fonts that complement each other. One approach is to use multiple fonts belonging to one family so that you have bold, italic, light, medium, and black options to use. Different fonts from within the same family can break up the text and draw attention while still being complementary.
Adobe adds fonts to their Typekit library and there are names that you have probably never seen as options in common applications like Microsoft Office. Check out Blambot, Chandler Van De Water, EuropaType and MAC Rhino Fonts as examples.