In the above example, kerning separates the two “T”s to improve readability. Common fonts have specific kernings for every pairing of adjacent characters, so all letters fit together snugly. Fonts can have smaller or wider kernings to improve legibility and avoid awkward gaps. Kerning is the horizontal space between two specific characters. 24 px), and may have other special stylizations applied (e.g., italicized or non-italicized, rounded or unrounded).įor example, the fonts “Helvetica Light (12pt),” “Helvetica Regular (16pt),” and “Helvetica Bold Oblique (20pt)” are three fonts in the “Helvetica” typeface: Every font within a typeface has a specific weight (i.e., bolder or lighter), size (e.g., 16 px vs. A font is a particular instance of a typeface.
Common typefaces include Times New Roman, Arial, Helvetica, Courier, and Calibri.īut hold on, aren’t those fonts? Not exactly. Typefaces and FontsĪ typeface is a specific look and feel applied to a set of alphabetic and numeric characters.
#Web 2.0 text styles how to#
To better understand how to introduce effective type to your website, let’s first cover some fundamental terminology in the field of typography, and how each term applies to web design. All of these details matter, since they amount to a comfortable reading experience for as many visitors as possible. multiple device types and screen sizes - text should be legible across any digital medium.įor all of these considerations, web typography gets its own special category.Īdditionally, web typography encompasses both how we design the look of the text itself - fonts, colors, and styling - as well as how we present the text on its respective web page.accessibility, because not all internet users perceive or interact with web text in the same way.skimmability, as users tend to land on web pages looking for something specific and want to find it fast.shorter attention spans - there are virtually endless website options available, many with better letters.On top of ease-of-reading, digital text must be designed for: This is because the best practices around web text often differ from those of printed text, and there’s a lot more to account for online. Speaking generally, typography determines how text looks to the reader, how the words literally appear on a page or screen.įor our purposes, it helps to hone in on just the text that we see on websites. We’ll cover some essential terminology, then review nine widespread guidelines that every legible heading and block of text should follow. This guide will tell you everything you'll need to know to get started with website typography. And for the few who do appreciate good typography, your attention to detail will convey professionalism, empathy, and design smarts. By focusing on the look and readability of your words, you ensure your readers won’t be challenged by your text. So, as a website owner, you need to invest time into the typography of your own site. If it fails, chances are we’ll bounce off the page.Įvery website has text, and where there is text there is either good or bad typography. If a website’s typography works, we won’t notice. Typography plays a critical role on any website by ensuring we can comfortably read and process all its text-based content.
This means that, from a typography standpoint, Wikipedia did its job perfectly. But, I’ve never come away from, say, a Wikipedia article and thought “Wow, the text on that page was so readable!” I came for some information, I read the information, and I left with the information in my head. Speaking for myself, I’m an avid website-browser, knowledge-gatherer, and factoid-finder.
0 kommentar(er)
