In addition, pay close attention to the spacing, and be prepared to open or close the spacing (tracking) as necessary.ġ. It’s very difficult to visualize what 14-point text will look like from a 60-point showing, and vice versa. To avoid unwanted surprises when choosing a typeface, always try to see how it looks at the size(s) you plan on using. On the other hand, display designs used at small sizes can have design features that break up, disappear, or fill in when viewed small become less readable and look too tight. A text face used at large sizes can sometimes look clunky, heavy, and unattractive, and the spacing looks too open. Spacing, proportions, and design details change optically. Typefaces look different depending on the size at which you view them. Sometimes they’re interchangeable, but not always. Display type, on the other hand, can forgo the extreme legibility and readability needed for long blocks of text at small sizes for a stronger personality, elaborate and more expressive shapes, and a more stylish look. This usually implies fairly clean, consistent, uncomplicated design features more open spacing than a display face and thin strokes that hold up at smaller sizes. In general, text type is designed to be legible and readable at small sizes. There are two primary categories of type: text and display. But the good news is no matter what their intended usage, many fonts can be used for both. The bad news is there is no easy, automatic way to tell if a typeface was originally intended for text or display usage. How can I tell the difference between a text font and a display font? Are there any rules for their use?Ī. If Ilene answers your question in the blog, you’ll receive one Official T-Shirt!
Post your questions and comments by clicking on the Comments icon above. You can read more on the MDN documentation for font and font-family.TypeTalk is a regular blog on typography. For example, this will set both the font size and the font family stack: font: 1.5em Georgia, Arial, sans-serif However, it is often convenient to use the shorthand font to set other related parameters such as font-size, font-weight etc in a single line. For example: font-family: Helvetica, Arial, sans-serif The font-family is used to specify the typeface only, either one, or a stack of multiple typefaces, so that there is one or more fallback choices in case of font unavailability. This comes from a How-To Geek article that explains it nicely. In summary, in common terminology, typeface (aka font) means the design, font means the file containing the typeface, and font-family means collection of related fonts. And a “font family” represents a collection of related fonts, such as bold and italic variations of the same “typeface” or “font”. So, when we say that a font is installed, we mean that the file exists in the designated location for the system. More correctly, “font” means the file on the system that represents a given typeface. Frequently, when people and user interfaces refer to “font”, they actually mean the “typeface” or artistic shape of the characters, such as Arial or Times New Roman. Let’s clarify the terminology first: "typeface" and "font" are usually used interchangeably to mean the same thing.