A Macon roofer pulled up his homepage on his phone after a sales call last fall. The headline displayed cleanly. The body content sat in a thin grayscale weight that he could read in his office and could not read in his truck. He had paid for the site twelve months earlier. He had never read it on a phone screen in real conditions, and he had never heard it read aloud through a screen reader, which meant he had never noticed that his typography was costing him the half of his audience that browsed on phones in mixed lighting and the share of his audience that used assistive zoom.
The typography on a service business website is not a brand expression. It is a performance constraint. Font selection affects load speed, readability under real conditions, accessibility for visitors with low vision, and the rendering behavior of every page on the device the visitor actually uses. When the typography fails, the rest of the site is doing recovery work that often does not succeed.
What follows is the framework we apply when auditing typography on local service sites in Macon and the surrounding markets: the decisions that move conversion, the mobile rendering reality that desktop-first design misses, the accessibility floor that most small business sites fail without realizing it, and the load-time consequences of decorative font choices that look strong in the design tool and degrade the page in the browser.
The Three Typography Decisions That Move Conversion
Three typography decisions on a service business website carry most of the readability and performance weight. The rest is brand expression that matters for recognition but does not move the page-level metrics that drive lead volume.
The first decision is body text size. Apple’s Human Interface Guidelines recommend a minimum of 17 points for iOS body text, and the practical floor on web body copy that holds up across Android and iOS sits at 16 pixels. Sites that ship with 14-pixel or smaller body text on mobile force the visitor to zoom, which most visitors will not do. They will leave before they zoom.
The second decision is line height. Body copy on a phone screen at 1.2 line height feels cramped, while line height in the 1.5 to 1.7 range reads cleanly across screen sizes most visitors use. The same body copy at 1.3 line height on desktop feels normal and feels wrong on mobile because the screen real estate is smaller and the eye tracks differently. Sites tuned for desktop reading often fail mobile reading without showing any other symptom.
The third decision is font weight contrast between headings and body copy. Headings that share a weight with body copy lose their structural function. Body copy that uses a thin weight (200 or 300) on white or near-white backgrounds fails the WCAG 2.1 AA contrast standard at common rendering sizes, which is how the Macon roofer’s body copy disappeared in real conditions. The fix is not a redesign. The fix is usually adjusting the body weight to 400 or 500 and the heading weight to 600 or 700, which restores hierarchy without changing the font.
These three decisions, made consistently across the site, produce typography that reads cleanly on the devices the audience actually uses. The companion decisions on sit in the same layer and reinforce each other.
Web Fonts and the Performance Cost Most Sites Ignore
A web font is an HTTP request. Every weight and style added to the font stack adds another request, and every request adds load time. Sites that ship with five Google Font weights across two families pay roughly ten extra requests on first load before any content renders.
The fix is not to abandon web fonts. The fix is to load them efficiently. Three configuration decisions handle most of the cost.
The first is font-display: swap. The CSS property tells the browser to render the page with a system fallback font while the web font loads, then swap the web font in when it arrives. Without swap, the browser waits for the web font, which produces FOIT (Flash of Invisible Text), a blank text area while the font downloads. Sites that fail INP (Interaction to Next Paint) on mobile often fail because of FOIT during the first second of the page render.
The second is preloading the critical font weights. The HTML <link rel="preload" as="font" crossorigin> directive tells the browser to start downloading the named font file as early as possible, which reduces the gap between page load start and font availability. Preloading two weights (regular and bold) catches most of the page rendering need without adding noticeable weight.
The third is subsetting. Most service business sites use a small share of the characters available in a full font file. Subsetting the font to the Latin character set the site actually uses (or the specific character ranges the site needs) reduces the file size by 60 to 80 percent in most cases. Google Fonts handles subsetting automatically when the font is requested with the text= parameter.
Sites that apply these three configurations turn web fonts from a performance liability into a manageable cost. Sites that skip them ship with a font stack that pulls down LCP and INP scores even when every other element on the page is optimized.
System Font Stacks: When the Best Choice Is the One the Device Already Has
The strongest performance choice for body copy on most service business sites is the system font stack. The font is San Francisco on iOS and macOS, Roboto on Android, Segoe UI on Windows, and the appropriate fallback on every other platform. The browser renders the body copy in the font the operating system already has loaded, which means zero HTTP requests for the body font and zero FOIT risk.
The CSS for the system font stack is straightforward:
The visual result varies slightly by platform, which some brand-conscious owners read as a problem and most visitors do not notice. The performance gain is real, the readability is high (operating system fonts are tuned for the device’s screen), and the maintenance cost is zero.
The places where a custom web font is worth the cost are headings, where the brand expression carries more weight, and specific sections (logo lockup, hero typography) where the font choice contributes to recognition. Pairing a custom web font heading with a system font body produces strong brand expression at a fraction of the performance cost of a fully-loaded web font stack.
Accessibility Is the Floor, Not the Ceiling
The WCAG 2.1 AA standard sets the practical floor for typography on a service business website. Sites that fail AA contrast (4.5:1 for body text, 3:1 for large text) lose readers who can read perfectly well in print and cannot read the same content on a backlit screen. The Lighthouse report inside Chrome surfaces these failures in seconds, and the fix is usually a one-step adjustment to the body weight, the body color, or the background.
Beyond contrast, three other accessibility decisions affect typography performance.
The first is the relationship between typography and assistive zoom. Visitors with low vision often zoom the page to 200 percent or higher. Sites that use fixed pixel sizing (rather than relative em or rem units) break at high zoom levels: text overflows containers, layouts collapse, content gets cut off. Using rem units for body copy and headings preserves the layout under zoom and keeps the content readable for the audience that needs it.
The second is the line length. The optimal reading width for body copy sits in the 50 to 75 character range. On a phone, this usually means the body content uses the full screen width with appropriate horizontal padding. On desktop, this usually means the body content sits inside a centered column rather than stretching to the full screen width. Sites that allow body copy to stretch across a 1400-pixel desktop screen produce reading lines that the eye loses, which translates to lower comprehension and shorter sessions.
The third is the font choice for visitors with dyslexia. Specific fonts (Atkinson Hyperlegible, Lexend, OpenDyslexic) are designed to reduce visual confusion between similar characters, which improves reading speed for an audience that represents a meaningful share of any general visitor population. For service business sites in regulated verticals (legal, healthcare, education) where reading comprehension affects user outcomes, using one of these fonts as the body face is often justified. For most service businesses, a well-rendered general-purpose font with strong character distinction (Inter, Source Sans, Roboto) handles the same audience without the brand-recognition cost of a specialty font.
How to Audit Typography on a Live Site
Most typography problems are catchable in a thirty-minute review of the live site, and the review does not require design tools or expertise.
Open the site on the phone the audience actually uses. Read the body copy on the homepage and on a service page, in normal lighting and in bright outdoor conditions. If the lines feel cramped or the text fades in glare, the font weight, size, or contrast is contributing to the friction.
Run the homepage through Lighthouse in Chrome DevTools. The Performance and Accessibility audits surface contrast failures, font loading delays, and layout shift caused by font swapping. The fixes for each issue are usually small adjustments to CSS rather than redesigns.
Open the page source and check the font stack. If the page loads more than two web font families or more than four total weights and styles, the site is paying performance cost for typography variety the visitor probably does not notice. Reducing the stack to two weights of one family (or one weight each from a heading and body family) usually improves load metrics without changing the visual result meaningfully.
Test the page at 200 percent browser zoom. If the layout collapses, the text overflows containers, or the navigation becomes unreachable, the typography is failing the audience that uses assistive zoom. The fix is usually switching from pixel sizing to rem units in the CSS that controls type and layout.
Check the body copy at 16 pixels minimum on mobile. If the body is smaller, raise it. The mobile audience is the dominant audience for most service business sites, and mobile body text below 16 pixels forces the visitor to zoom or leave.
These five checks identify most of the typography problems on a live service business site. The fixes are measured in hours rather than weeks, and the readability and performance improvement shows up in the engagement metrics within the first month.
Frequently Asked Questions
Does typography affect SEO directly?
Typography does not directly affect ranking signals, but it affects engagement signals (time on page, bounce rate) and Core Web Vitals (LCP and INP through font loading behavior) that contribute to ranking over time. The most measurable indirect effect is on INP, where FOIT during font loading produces interaction delays the algorithm reads as a poor user experience.
Can I use Google Fonts without a performance penalty?
Google Fonts can ship with minimal performance cost when configured correctly: preloading the critical weights, applying font-display: swap, subsetting the character range, and limiting the stack to two weights of one family. Sites that load five Google Font weights across two families without these configurations pay roughly ten extra HTTP requests on first load.
Should I match my print typography on the website?
Print typography optimizes for ink and paper. Web typography optimizes for backlit screens, varying viewing distances, and a wider range of vision profiles. The brand connection is worth preserving where possible, but the screen-rendered version of a print font often needs adjustment (heavier weight, slightly larger size) to read cleanly on devices the audience actually uses.
How does typography interact with Google Quality Score on paid landing pages?
Quality Score weighs landing page experience, which includes mobile usability and load time. Typography that fails mobile readability (small body text, low contrast, slow font loading) reduces engagement signals the algorithm reads. Fixing typography on paid landing pages tends to lift Quality Score over the following weeks as the engagement data updates.
What about variable fonts?
Variable fonts ship a single file that contains multiple weights and styles, which can reduce the total file size compared to loading multiple separate weight files. The browser support for variable fonts is now strong enough for production use on most service business sites. The performance benefit is real for sites that use three or more weights from the same family. For sites that use one or two weights, the variable font advantage is smaller and may not justify the configuration work.
Book a Typography Audit for Your Macon Service Business Site
Book a 30-minute typography audit for your Macon service business website. Southern Digital Consulting is a that builds and audits sites for service businesses across Macon, Atlanta, and the wider Southeast. We run the five-check audit described above (mobile readability, Lighthouse performance and accessibility, font stack review, zoom test, body size check), and we return a written list of the specific failures and the cost to fix each one. If your typography is working, the audit confirms it. If it is not, the list is yours whether you act on it with us, with your current designer, or in-house.
Phone: (478) 200-2604. The first call is no cost.
About the Author
This article was written by the content team at Southern Digital Consulting and reviewed by Nick Rizkalla, Co-Founder, who has 14 years of marketing and digital strategy experience in the Macon and Atlanta markets. SDC builds websites and runs SEO programs for service businesses across Georgia. For the companion decisions that work alongside typography in shaping local web engagement, see our pieces on and .