Short answer: the best law firm website fonts are the ones a stressed reader can get through on a phone without effort. In practice that means a large, plain body face (serif or sans serif both work), a heading face with some character, no more than two families and a handful of weights, fonts loaded so they do not slow or shift the page, and sizes set for mobile first.
Typography is the part of a law firm site that most people never consciously notice and everyone experiences. A visitor will not think “this body text is too light at fifteen pixels”. They will think the page is hard to read, skim less of it, and leave sooner. Font choice also shapes the first impression of the firm before a single sentence is read: traditional, modern, warm, cold, cheap or careful.
Readability comes before personality
Law firm visitors are often reading under pressure. Someone checking a criminal defense page after an arrest, or an executor trying to understand an estate, is not in a mood to decode thin, elegant letterforms. The body text has one job, which is to disappear and let the words through.
Several properties make a face readable on screen. A generous x-height, meaning the height of lowercase letters relative to capitals, keeps text legible at smaller sizes. Open counters, the enclosed spaces in letters like “e” and “a”, stop letters from blurring together. Clear distinction between similar characters such as capital I, lowercase l and the number 1 matters more on a legal site than most, because people read case numbers, phone numbers and dates. And a regular weight that is not too thin matters for contrast, especially for older readers.
Contrast is part of readability, not a separate topic. Light gray text on a white background is fashionable and hard to read. The WCAG accessibility guidelines set a minimum contrast ratio of 4.5:1 for normal body text at the AA level, and 3:1 for large text. Treat that as the floor. Dark charcoal or near black on white or a very light background is almost always the right call for body copy.
Serif or sans serif for a law firm
This question gets more debate than it deserves. On modern high resolution screens, both serif and sans serif faces are perfectly readable for body text when they are well designed and set at a decent size. The choice is mainly about tone.
Serif faces carry associations with print, tradition and institutions. That suits firms that want to signal steadiness: estate planning, trusts, business law, established litigation firms. Readable screen serifs include Georgia, Merriweather, Source Serif and Lora, each with a slightly different personality. The risk is looking dated, which usually comes from pairing a serif with an old layout rather than from the serif itself.
Sans serif faces read as modern, direct and approachable. They suit consumer practices where the firm wants to feel accessible: personal injury, family law, immigration, bankruptcy. Inter, Source Sans, Lato, Open Sans and Work Sans are all solid choices. The risk here is blandness, since many sites use the same few sans serifs, so personality has to come from the heading face, color and layout instead.
A common and reliable pattern is a serif for headings and a sans serif for body text, which gives the firm a traditional signal at the top of each section and easy reading underneath. The reverse also works. What does not work is a decorative or script face anywhere a visitor needs to read more than a few words. Script fonts in a logo can be fine; script fonts in navigation or headings are not.
Pairing without clutter
Two families is the practical limit, and one well designed family with a range of weights is often enough. Each extra family adds visual noise and another file to download.
When pairing, look for contrast in structure and harmony in proportion. A serif heading and sans body should have similar x-heights so that they feel related when they sit next to each other. Avoid pairing two faces that are almost the same, such as two neutral sans serifs, because the difference looks like a mistake rather than a choice. And keep the heading face to one or two weights; a bold heading and a regular body are usually all a page needs.
Superfamilies, which include matched serif and sans versions designed together, make pairing easy and consistent. Source Serif with Source Sans is one example, and IBM Plex has serif and sans versions as well. If your firm has brand guidelines that specify a typeface, check the license covers web use, and if it does not, choose a close web licensed equivalent rather than embedding an image of text.
Sizes that work on a phone first
Most firms design on a large monitor and check the phone at the end. Typography should be set the other way around, because most legal searches happen on phones and the phone is where small type fails.
The table below gives starting points we use. They are not rules, and the right size depends on the specific face, since two fonts at the same pixel size can look very different. Test on a real phone, held at a normal distance, by someone over fifty.
| Element | Desktop starting point | Mobile starting point | Why it matters on a law firm site |
|---|---|---|---|
| Body text | 18px | 16 to 17px | Practice pages are long and read by anxious, often older visitors |
| Line height | 1.6 to 1.7 | 1.5 to 1.6 | Tight lines make long legal explanations feel dense |
| Line length | Roughly 60 to 75 characters | Full width minus comfortable margins | Very wide text columns are hard to track on large screens |
| H2 headings | 30 to 36px | 24 to 28px | Visitors scan headings to find their situation |
| H3 headings | 22 to 26px | 20 to 22px | FAQ questions need to stand out from answers |
| Form fields | 16 to 18px | At least 16px | Below 16px, iPhones zoom into the field when tapped |
| Buttons and phone links | 17 to 18px, medium or bold weight | 17 to 18px, large tap target | The call to action has to be easy to read and hit |
| Disclaimers and footers | 15 to 16px | 15px minimum | Required notices still need to be legible |
The form field row is worth highlighting. Safari on iPhone zooms the page when a visitor taps into an input with text smaller than 16px, which disorients people right at the moment they are filling out a contact form. Setting inputs to 16px or larger prevents it.
Disclaimers deserve the same care. Some firms shrink required advertising notices to a tiny gray footnote. Beyond looking evasive, a notice nobody can read may not do the job it is there for. What a notice must say and where it must appear varies by state; this is not legal advice, so check your state bar’s rules.
Web font performance
Fonts are files, and on many law firm sites they are among the heaviest things on the page. Poorly loaded fonts cause two visible problems: text that stays invisible while the font downloads, and layout shift when the fallback font is swapped for the web font and every line reflows. Both affect user experience and the Core Web Vitals measurements Google uses. Our post on Core Web Vitals for law firm websites covers the wider picture; here is what applies to type.
Load fewer files. Every family, weight and style is a separate file. A site that loads regular, italic, medium, semibold, bold and black for two families is downloading a dozen fonts to display three. Audit what the design actually uses and remove the rest. Page builders and themes often load weights by default that nothing on the site uses.
Use WOFF2 and consider variable fonts. WOFF2 is the compressed format modern browsers support. Variable fonts pack a range of weights into one file, which can be smaller than several static weights if you use more than two or three.
Self-host where practical. Serving fonts from your own domain avoids an extra connection to a third party server and gives you control over caching. If you do use a hosted font service, connect to it early with a preconnect hint.
Control the swap. The CSS font-display property decides what happens while the font loads. A value of swap shows fallback text immediately and replaces it when the font arrives. To reduce the visible jump, choose a fallback system font with similar proportions and adjust it with the size-adjust and related descriptors so the swap barely moves anything. Preload only the one or two files used above the fold, typically the body regular and the heading weight.
Subset if you can. If the site is English only, a Latin subset is far smaller than a file covering every script. A bilingual law firm website needs to check that the chosen face includes every accented character and punctuation mark the second language uses, and that the subset keeps them.
Small typographic details that signal care
Body text set in all capitals is hard to read and feels like shouting; keep capitals for short labels. Justified text on the web creates uneven gaps between words, especially on narrow screens, so align left. Underline links in body text, or at least make them clearly distinct, because color alone fails for some readers. Avoid light font weights for anything a visitor needs to read, since they look refined in a mockup and faint on a phone in sunlight.
Consistency matters as much as any single choice. Headings that change size between pages, buttons in three different fonts, and blog posts pasted in from a word processor with their own styling all make a site feel assembled rather than designed. Set the type scale once in the theme and let every page inherit it. If you are on WordPress, our roundup of WordPress themes for law firms notes which themes make global typography easy to control.
Frequently asked questions
Should a law firm website use serif or sans serif fonts?
Either works for body text on modern screens. Serifs signal tradition and suit estate, business and established litigation firms; sans serifs feel modern and approachable for consumer practices. A serif heading with a sans serif body is a dependable combination.
What font size should body text be on a law firm website?
A good starting point is around 18px on desktop and 16 to 17px on mobile, adjusted for the specific typeface. Test on a real phone with an older reader, since many legal clients are not young and read in stressful conditions.
How many fonts should a law firm site use?
No more than two families and only the weights the design actually uses. Each extra family or weight adds a download and visual clutter, and one well designed family is often enough.
Do web fonts slow down a law firm website?
They can if too many files are loaded or loaded badly. Use WOFF2, remove unused weights, self-host where practical, preload only the key files, and use font-display swap with a size-matched fallback to limit layout shift.
The short version
Pick a readable body face at a generous size with strong contrast, add a heading face that sets the tone you want, and stop at two families. Set sizes for the phone first, keep form fields at 16px or more, give disclaimers legible type, and load fonts lean so the page neither stalls nor jumps. Then apply the same scale everywhere.
Curious how your current typography and font loading hold up on a phone? Run a free website scan. If you would rather have it designed properly from the start, see how we work as a legal web designer.
