Introduction to Typography for Lawyers
When you use LawLytics for your law firm website, you don’t need to worry about typography because we curate the best fonts and font-pairings for you, while giving plenty of style choices and combinations to make your law firm’s website look and feel like your own.
If you’re looking for a simple way to get the most out of typography on your law firm’s website without spending time, effort or energy on the subject, and without taking chances or guessing, we suggest that you take a look at how it works with LawLytics by requesting a demo.
If you’re looking to get into the weeds and develop a deeper understanding of typography for lawyers, this blog post will give you a great overview of the topic.
Make good content look great
The content you write for your law firm’s web page articles and blog posts is very important. It can attract and convince potential new clients to contact you for legal representation. And the more quality content on your site, the higher the likelihood the search engines will rank your site higher for relevant searches. So, it’s imperative your content, and overall site, look confident and professional. Part of the way to achieve this is by using well-designed fonts/typefaces.
Dictionaries generally define “typography” as “the style and appearance of printed matter”, and “font” as “a set of type of one particular face and size”. No matter how you define them, they’re more than just letters on a page. The fonts you use are also part of the personality of your firm’s “voice”. While you need to make sure your typefaces look great, are easy to read, and reflect the professionalism of your practice, you shouldn’t need to stew for hours over which fonts you’re going to use.
By following some simple guidelines, you can select and use a family of smart typefaces and concentrate on what you’re writing. What follows is an overview of typography from a web designer’s perspective. If you hire a professional to create your firm’s website, this overview covers terminology and best practices which you can use to provide fruitful direction to any designer working on your firm’s behalf.
Terminology
Every font has its own particular attributes which affect the way they look, their readability, and the overall feel they give your words. Below are some basic terms you should know about typography. These terms will help you when discussing your site’s typography with a designer, or, if you’re designing your site yourself, when you’re researching the internet and elsewhere for resources.
Ascender – type strokes that rise above the x-height.
Baseline – the imaginary line defining the visual base of the letterform. All letterforms sit on the baseline.
Bowl– the curved stroke within a letter.
Bracket – a curving joint between the serif and the stroke.
Cap height – the height of the upper case letter in a font, taken from the baseline to the top of the character.
Counter – the negative space within a letter either fully or partially enclosed.
Descender – type strokes that fall below the baseline.
Font – a specific variation of a typeface in a specific point size.
Sans serif – typefaces that lack the strokes at the ends of the letters.
Serif -ending strokes of characters; short cross lines at the ends of main strokes; typefaces with strokes on the ends of the letters
Stem – the main upright stroke of a letter.
Typeface – a particular style of type design including the full range of characters, in all sizes.
X-height – height of the body of lowercase letters, not counting ascenders and descenders.
Things To Consider
Probably the best starting point, when exploring typography, is Helvetica, a font so famous a movie was made about it. It was designed by Max Miedinger in 1957 and influenced an entire generation of designers. If you’ve ever ridden the NYC subway, all of the signs use Helvetica. It is a “sans serif” font and is extremely readable. Print designers love Helvetica, but web designers have moved beyond it. Still, it’s good to at least know about it, as it is considered by many to belong in the pantheon of typefaces.
Compare Helvetica with another of the most-loved/utilized fonts of all time, Times New Roman. Times New Roman is a Serif font, and is considered a classic, conservative typeface that is also highly readable. Many well-known newspapers and magazines use Times New Roman. Here’s a screenshot from The New Yorker:
Helvetica and Times New Roman are the best known, most-used and traditional fonts in the business.
Whichever fonts you use, the following aspects should be considered.
Legibility (how easily each letter is recognized) and Readability (how easily the overall text can be read) are the most important criteria.
The amount of White Space that exists around the font, airing it out, keeping it from looking cluttered, is an inherent element of legibility and readability. Also, if the font is too spread out and there is too much white space, this can make a font difficult to read. Many websites, especially in the tech field (think Apple) utilize a great deal of white space. It can add elegance and cleanliness. It can make what words are on the page seem even more important. The white space in and around your words can also be used to create design elements. In this regard, consider the FedEx arrow:
Next, the font’s Type Size is important to be aware of, and is, sometimes, a function of your audience. For example, most brands that have an older consumer base will make sure that even their smallest typeface is 14 points in size. With younger audiences, 10 point type is often used for body copy.
Typeface Variation, such as Italics, Bold, underlined and ALL CAPS can be used to provide emphasis within your content.
Finally, when you use fonts beyond the traditional typefaces, you will encounter varied emotional responses to them. Two examples of this are script fonts, which can add elegance and a feeling of formality, and Comic Sans, which can make content feel less formal, perhaps even unprofessional.
Some Other Considerations & Resources
Color/Contrast
When you use a colorful type or background, be aware of readability issues due to the way contrast affects what viewers see. One example of this is when white text is used on a black background, which can be hard to read, especially in long passages. Even black on white can be difficult if the contrast is too harsh. Often, on websites, what appears to be white is really an off-white or light grey, making the type easier to read.
If you really want to use color fonts with color backgrounds on your website, realize that it’s not simply a matter of finding two very different colors. Even two very different colors can create an effect that’s hard to read:
One way to double check if two colors aren’t going to be easy to read is by converting a sample to “grayscale”, which exposes what designers call the “value” of the colors. In the image above, even though the colors are very different, once they are converted to grayscale, you can see that their values are so close the words become almost impossible to read. This tells you these colors are not a good pair, contrast-wise.
Leading
Leading is the space between lines of text – what web designers also refer to as line height. The term “leading” comes from when type was set by hand in printing presses and lead strips were put between lines of type to add space.
Without enough space between lines of type, it becomes difficult for the viewer to read and follow from one line down to the next. Adding too much space makes large sections of text tedious to read.
Kerning
Kerning is the process of adjusting the amount of space between individual characters, and is a corollary to the element of “white space”. If letters are jumbled up right next to each other, they’re very hard to read. If too spread out, they’re also hard to read, and it can be. Like “leading”, kerning was really important when type was set by hand. Still, if you’re using a designer to create your firm’s website, they may be laying out headlines and other parts of the pages in a design program where letters and words are applied as design elements, in which case. attention must be paid to the spacing between letters and lines. You can explore the concept of kerning here.
Hierarchy
This concept has to do with which words viewers are going to read first, based on their position and size on the page. For example, you could have a sentence at the bottom of a page filled with passages, and if that sentence is a lot bigger than any other sentences, it will often get read first. So, consider what prominence different sized passages have to others. Thus, it’s not just about prominence but also about the relation of different passages with each other.
Eye tracking studies have consistently shown that, upon arriving on a web page, people tend to scan left to right along the top and then down the left side of the page, going right only if something compelling pulls them across the page. Knowing this, if you want something to be read that’s not on top or along the left side, you may want to make it more prominent, either by making it bigger, or bolding it or adding color.
Also, ask yourself where the focal point of each of your web pages is. Is it on the top left? Where will viewers’ eyes naturally go? And then, where will they go from there? These focal points should be consistent with where you want viewers to go on their journey with your text.
Font Combinations
As a general rule, it’s best to not mix too many fonts on your web pages. Often, the best sites simply use one font family and use type variations and sizes to create emphasis. A great tool for comparing fonts is Typetester.org. It’s also a good tool for choosing between fonts to use on your site.
Webfonts
Professional fonts with web-licenses can be purchased from many online font distributors including typotheque.com, typekit.com, myfonts.com, and fontspring.com. Most sites have options for licensing for print and web use, and they often allow for some sort of free trial period. Google Webfonts is a great free resource for exploring and selecting web fonts for your website. They have some great typefaces and are easy to install.
Kinetic Typography
Typography also has a role in videos. When you don’t have a big budget to create a video for your law firm, one thing to consider is kinetic typography. In other words, animated type. It can be a very inexpensive way to create a video that can make a great impression with a clear, strong message. For some examples of kinetic type, check out Vimeo’s channel dedicated to it, or search “kinetic type” on YouTube.
