**Only a few years ago, the list of available font faces on the web were limited to what the majority of end users would have pre-installed on their machine, whether Windows based or Mac.**
Now however, developments in the web world have changes all of this. Here, we look at how these changes have impacted on the development of websites – both during the design and build stages.
From the developer
Many print fonts aren’t suitable for certain displays or screen resolutions. This is because fonts are limited by pixels – thousands of small dots which individually light up to make up a picture. This layout of pixels in a grid causes issues when rendering curves arches and circles.
Fonts have been rendered in many ways over the years, and even today are displayed differently depending on the operating system, screen type, and even web browser. With these limitations in mind, we can safely use certain font faces for specific means. We are able to use a Calligraphy style script faces for large headings safely for example, as at a larger size the rendering of the letters do not rely so heavily on techniques such as subpixel rendering.
For body copy (paragraphs/main content), a bit more consideration is required. At smaller sizes, the style of the font face – and the way in which it was developed (or converted from print font to screen font) – is important to whether it will remain clear and usable.
With certain fonts, it may appear crisp and clear at sizes 7 and 9, but blurry at 8.
There are a number of “font services” which provide access to a vast library of font faces., Certain licensed fonts are only available on specific providers, and each provider has subtle differences in the way they work; both in how to implement the font onto your website, and special features they provide. These features include delivering tweaked fonts to certain browsers and operating systems to assist in clarity.
### **Implementation**
Fonts have been injected into websites a number of ways.
These range from old techniques such as Flash and Javascript replacement. This works by scanning over the copy on your website, and individually pulling out the letter, and replacing them with an image or flash embed rendered in the desired font.
These have downsides in that it would harder to select the text on the page. The flash technique wouldn’t work on a vast majority of devices which do not support such plugins including most phones, tablets, and the metro version of Internet explorer 10.
A new web-safe technique named @font-face is available to developers, allowing them to attach fonts to websites – whether this be by storing the font faces on the web server – and having visitors download the font in the background while loading the website.
Both of these techniques are near invisible to the end user. The only 3 technicalities are whether the site is set to appear blank while the font is being downloaded and rendered, or whether you risk the site loading as soon as its available with a fallback font, and then a possible flickering of the page, as the new font is applied to the copy.
The 3rd technicality, even with @font-face being largely supported, older browsers might not support this technology, and there is a possibility of a font provider going offline for a short period of time, always provide a fallback font, preferably something similar to the chosen font e.g. Helvetica and Arial.
From the designer
Many web designers think that typography consists of selecting a typeface, choosing a font size and deciding whether it should be italic or bold. For most web designers, it ends there. But there is much more to achieving good typography, and it’s in the details that designers often neglect.
Here are some simple ways you can improve your web typography at the initial design stage.
### **Measure**
The measure is the length of a line of type.
To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text.
For optimum readability you want the measure to be between 40 – 80 characters, including spaces. For a single-column design 65 characters is considered ideal.
### **Leading**
Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type, and improves the overall appearance of the text.
### **Baseline Grid**
A (link: https://www.superdream.co.uk/tutorial-setting-up-a-baseline-grid-in-indesign/ text: baseline grid popup: true title: Tutorial – Setting Up a Baseline Grid in inDesign) is the foundation for consistent typography.
It allows the reader to easily follow the flow of the text, which in turn increases readability. A continuous rhythm in the vertical space keeps all the text on a consistent grid. This ensures proportion and balance are retained throughout the page, no matter the type size, leading or measure.
### **Widows & Orphans**
A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph.
Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, word spacing, letter spacing or by entering line breaks.