Typography is one of the most powerful elements of web design. In a 2024 Monotype study, 85% of designers said font choice is critical to shaping a brand’s identity. Whether you choose a sharp Swiss sans serif or a classic print-inspired serif, typography influences how users perceive your brand.
“Tradition is a huge part of typography,” says Kjell Reigstad, a senior staff designer at Shopify. “Different typefaces have different cultural touchpoints and traditional uses, and that’s bundled into the way people will see a brand or storefront.”
Here’s how font families, pairing, and fallbacks shape web typography, and the stories behind the HTML fonts (often just called web fonts) featured in Shopify’s themes.
What is an HTML font?
An HTML font is simply a font displayed on a web page. In the early days of the web, font choices—like family, size, and style—were written directly into a website’s HTML and depended on the fonts installed on a user’s device.
Today, those details are handled through Cascading Style Sheets (CSS), the language that styles web pages, and most fonts are delivered through web files from online servers. Web fonts have evolved from basic system-dependent text to sophisticated, universally accessible typography delivered through the cloud.
Because of this shift, “HTML font” is no longer a technically accurate term. Still, people commonly use it to describe any font on a website.
HTML fonts vs. print fonts
Print fonts were designed for ink on paper and printing presses, whereas HTML fonts are designed for use on digital screens.
Early print typefaces were derived from calligraphy, with many letter shapes based on the strokes and embellishments of natural hand motions. The serif—characterized by small strokes at the ends of letterforms, as in Times New Roman or Garamond—has its origins in ancient Roman stone inscriptions and the translation of written forms to carved or printed typefaces.
By the 1800s, designers introduced sans serif (meaning “without serifs”) typefaces, a deliberate move away from calligraphic and traditional serif detail for a cleaner, more modern look.
“When the web first started out, we didn’t have high-definition screens,” says Kjell. “Sans serifs just looked better onscreen, while serifs looked a little chunky and weird.”
For years, research and usability guidelines suggested sans serifs were clearer for screen reading, while serifs were preferred in print for their traditional associations and because they supposedly helped eyes flow through long chunks of text. But on modern displays, the difference in legibility between serif and sans serif fonts is minimal.
As high-resolution and retina screens become mainstream, the technical hangups that favored sans serif fonts are decreasingly relevant. More web designers are now revisiting serif fonts online, blending print tradition with digital clarity.
How font families work in CSS
Cascading Style Sheets (CSS) is a coding language that describes how HTML elements should appear on a web page. HTML provides the structure and content—headings, paragraphs, images, links—while CSS controls the visual presentation, including fonts, colors, spacing, and layout. Together, they turn basic content into a polished, user-friendly design.
CSS can load fonts in two ways:
- Pre-installed system fonts. Fonts like Arial or Times New Roman are often called web safe fonts and are guaranteed to work on any device because they come pre-installed on most operating systems.
- Hosted web fonts. These fonts, such as those from Google Fonts, are delivered as font files from an online server and give designers more choice and flexibility. However, they do rely on load time and server availability because the fonts must be downloaded from the server before they can be displayed.
To keep sites readable if something fails, CSS uses font stacks to provide fallback options. A font stack lists fonts in order of preference: first the primary font, then a backup or default font (backups are chosen because they share a similar style with the primary font), and finally a font family as the last resort.
Let’s say your first font choice is Inter, which is available from Google Fonts. You might see the font stack written like this:
font-family: ’Inter’, Arial, sans-serif;
In this stack, the browser first tries Inter. If it can’t load, it falls back to Arial, a web safe system font with a similar sans serif style. If Arial isn’t available, the browser displays any locally installed sans serif font to ensure the site remains legible.
Families of HTML fonts
To ensure consistent display across devices, web browsers standardized five core font families: sans serif, serif, monospace, cursive, and fantasy. Here’s how these families differ and where they’re most effective.
Sans serif fonts
Sans serif fonts are defined by what they leave out: the small strokes or extensions (serifs) that embellish letters in traditional typefaces. The clean, modern look of sans serifs makes them a web design staple, and their simple shapes have historically made them easier to read on screens compared to more ornate typefaces.
This association with clarity and functionality isn’t accidental. As type foundry Monotype notes, sans serifs evolved out of modernism, which emphasized functionality over decoration. This history helps explain why technology, aerospace, and medical brands were early adopters of sans serifs—and why these simple fonts continue to dominate much of the web today.
The most recognized sans serifs include very popular fonts like Helvetica (and its updated version, Helvetica Neue), Tahoma, Verdana, and Open Sans. Other widely used options include Trebuchet MS, Segoe UI, Lucida Sans/Lucida Sans Unicode, Gill Sans, or Fira Sans. These fonts work for both body text and headlines.
Serif fonts
Serif fonts include the small strokes that extend from the ends of letterforms, a feature rooted in engravings and early calligraphy. Modern audiences often associate serif typefaces with print media like books, magazines, and newspapers, where they’ve long been used for body text.
“Even if I’m reading on my Kindle or something, I choose a serif typeface,” says Kjell. “That’s probably just because I’m used to reading them in books.”
Common serif types include classical fonts like Times New Roman (developed for the Times of London) and Garamond, as well as Palatino Linotype and Lucida Bright, a serif designed for both screens and print. Online, serifs are less common than sans serifs, but they’re increasingly viable on high-resolution displays and remain a strong choice when a brand wants to signal tradition, authority, or elegance.
Monospace fonts
Monospace fonts are typefaces where every character takes up the same width, much like text written on graph paper. The uniform spacing makes them especially useful for code, where alignment is critical, and for movie screenplays and scripts, where page length must be predictable.
Common examples include Source Code Pro and Courier New. While not often used for general website body text, monospace fonts can add credibility to technical content or create a deliberate, “terminal-style” design effect.
Cursive fonts
Cursive fonts mimic handwriting, with letters that are typically slanted and connected. Well-known examples include Zapfino, Lucida Handwriting, and Brush Script (and its more connected counterpart, Brush Script MT).
Cursive fonts can be hard to read in long passages and are rarely used for website text. Instead, designers may use them sparingly in headings, logos, or decorative elements where a handwritten feel supports the brand’s style.
Fantasy fonts
Fantasy fonts are a miscellaneous category that includes decorative or thematic typefaces that don’t fit into the other families. They often mimic a specific historical or stylistic look. For example, Papyrus evokes an ancient, historical feel, while Chalkduster brings to mind the look of handwriting on a blackboard.
Because fantasy fonts emphasize style over readability, they’re best for display purposes like logos, headings, or other design elements where a distinctive personality matters more than legibility.
9 best HTML fonts
Here are nine popular fonts available in Shopify’s expansive theme library, which includes hundreds of free fonts.
To showcase how designers use them, we spoke with Kjell about how Shopify’s design team approaches font selection, font size, and more across different themes. The fonts below highlight some of his favorites, along with other strong options. Most of these fonts are sans serifs, reflecting their clean, versatile look online, with a few serifs mixed in for brands that want a more traditional or bookish feel.
1. Liter
Category: Sans serif
Why it’s great: Like Helvetica, Liter is a versatile Swiss-inspired sans serif, but with subtle quirks like slightly more open shapes and softer curves. “It’s great if your brand is a well-designed modern classic,” says Kjell. It works at a small size for body copy as well as a bit larger for headlines, and pairs well with a bolder typeface for more of a statement.
Where to find it: Pitch’s headings, subheadings, and body copy.
2. Bricolage Grotesque
Category: Sans serif
Why it’s great: Named after the French word for tinkering or patchwork, this elegant yet funky sans serif font adds flair without using serifs. It conveys an ecommerce brand that’s a little outside the ordinary, but still approachable.
Where to find it: Stretch’s headings.
3. Geist
Category: Sans serif
Why it’s great: As with Liter, Geist resembles Helvetica “with a bit more quirkiness,” says Kjell. “I like to use it to give a more modern twist to designs that otherwise could be very straightforward.”
Used as a bold display font as well as barely there body copy, geometric Geist has the versatility of a classic Swiss-inspired sans serif.
Where to find it: Fabric’s page headings, subheadings, and body copy.
4. Chivo
Category: Sans serif
Why it’s great: If you’re looking for a sans serif that hints at serif styling, try Chivo. With flourishes like a curled capital R and decorative capital I, this font feels a little more stylized than your average sans serif. The Ritual theme pairs it smartly with Geist for body text, preventing Chivo’s character from overwhelming longer reads in the body copy.
Where to find it: Ritual’s headings.
5. Instrument
Category: Sans serif and serif
Why it’s great: Designed as a matched pair, Instrument combines a tall, condensed serif with a looser sans. “They somehow work together, because they both have a similar hand-crafted feel to them,” says Kjell.
Instrument is part of Shopify’s Tinker theme, which Kjell says was inspired by hand-crafted and textural products. “The condensed serif feels warm and close, but the sans makes it feel more modern.”
Where to find it: Tinker’s headings and subheadings (serif) and body copy (sans).
6. Newsreader
Category: Serif
Why it’s great: Designed for the web, Newsreader is elegant and bookish without being stuffy. Lightweight and italicized for Shopify’s Dwell theme, Kjell says the design team wanted it to feel “like a whisper.”
“Dwell is modeled after the larger housewares brands,” he says. “Most of the products on that demo store are soft housewares like pillows and comforters. We wanted typefaces that would feel at home with that. So we chose one with very thin letters in a thin weight, so it feels a lot softer.”
Where to find it: Dwell’s headings, subheadings, and body copy.
7. Trirong
Category: Serif
Why it’s great: Originally designed in Thai characters by Thai foundry Cadson Demak, Trirong’s thin serifs and rounded curves give it a delicate, geometric quality. With nine weights, it’s versatile for many storefronts.
Where to find it: Vessel’s headings
8. Barlow Condensed
Category: Sans serif
Why it’s great: Inspired by California’s public signage, this font is friendly yet authoritative. Its approachable clarity delivers the impact consumer packaged goods need, like the barbecue sauce example in Shopify’s Savor theme.
Where to find it: Savor’s headings and subheadings.
9. Inter
Category: Sans serif
Why it’s great: A popular Google Font, Inter is another Helvetica-with-a-twist typeface that works for more formal or minimalist brands.
“It feels a little more industrial, especially when you get to some of the bolder weights,” says Kjell. “I like it for very formal designs or as a fallback when Helvetica feels too warm.”
Where to find it: Horizon’s headings, subheadings, and body copy.
Best HTML fonts FAQ
What is the best font in HTML?
There is no single best font. It depends on your brand and the context. A minimalist store might use a sans serif like Inter for its clean lines, while a more traditional business might prefer a serif like Newsreader. When deciding, balance aesthetics with how easy it is to read and how many languages it supports.
What is the most attractive font?
What feels stylish to one brand might look dated to another. Among Shopify’s recommended fonts, options like Liter and Geist stand out for their sleek, modern appeal, while Newsreader offers a more classic, bookish elegance. The key is choosing a font that aligns with your brand personality and makes your storefront inviting.
What are the font styles in HTML?
In CSS, fonts are organized into five families: serif, sans serif, fantasy, monospace, and cursive. Each contains many individual fonts. Fonts can also render in different styles (normal, italic, and bold), with CSS controlling size, weight, color, and line height (the distance between lines of text). These are formatting options that can be applied to most fonts.
