One of the most important components of , website architecture, is tattooing. In a 2024 Monotype research, 85 % of manufacturers said script choice is crucial to shaping a company’s identity. Typography has an impact on how people perceive your company, whether you choose a strong Swedish sans serif or a traditional print-inspired serif.
” Tradition is a huge part of typography”, says Kjell Reigstad, a senior staff designer at Shopify. Various typefaces have distinct cultural preferences and traditional applications, and that’s combined into how people perceive a company 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 exactly is an HTML style?
An style is simply a logo displayed on a website page. In the beginning of the internet, font choices, such as family, dimensions, and style, were instantly written into a blog’s and influenced by the fonts installed on a user’s device.
Today, those details are handled through ( CSS), the language that styles web pages, and most styles are delivered through web documents from online servers. From simple system-dependent text to powerful, open-source typography delivered via the cloud, web fonts have evolved.
Because of this change, “HTML typography” is no longer a essentially correct term. People also frequently use it to explain any style on a website.
HTML fonts vs. write styles
HTML fonts were created for use on online screens, whereas write fonts were created for use with ink on paper and printing presses.
First write typefaces were derived from handwriting, with some text shapes based on the strokes and embellishments of natural hand motions. The serif, which is characterized by small strokes at the letterform’s ends, since in Times New Roman or Garamond, was created by the conversion of written forms to carved or branded 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 internet first appeared, we didn’t include high-definition displays, says Kjell. ” Sans serifs only looked much onstage, while serifs looked a little thick and strange”.
Sans serifs were recommended in print for their standard associations and because they allegedly helped readers flowing through lengthy pieces of text, a trend that research and usability guidelines have for years. But on current features, the change in readability between font and sans serif fonts is minimal.
The professional hiccups that predominated sans serif fonts are becoming less and less relevant as high-resolution and retina screens become commonplace. More web developers are now revisiting serif fonts online, blending write history with modern quality.
How script people function in CSS
Cascading Style Sheets ( CSS) is a scripting language that describes how HTML elements may appear on a web site. CSS controls the visual display, including fonts, colors, distance, and design, while HTML provides the structure and content ( headings, paragraphs, pictures, links, and HTML). Collectively, they turn standard content into a smooth, user-friendly design.
CSS has two ways to pile fonts:
- Pre-installed method styles. Because they come pre-installed on the majority of operating systems, fonts like Arial or Times New Roman are frequently referred to as online healthy styles.
- Managed online styles. These fonts, like those from , are delivered as script documents from an online site, giving designers more options and flexibility. Nevertheless, they do count on load time and site accessibility because the fonts may be downloaded from the client before they can be displayed.
CSS uses script stacks to provide fallback options in order to keep websites accessible in the event of a failure. 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 second style is Inter, which is accessible through Google Fonts. You might see the logo bundle written like this:
Font-family:” Inter’, Arial, and sans-serif,”
In this load, the website first tries Inter. If it doesn’t load, it returns to the web healthy system font, Arial, and a , with a similar sans font style. If Arial isn’t available, the computer displays any directly installed sans font style to ensure the site remains readable.
people of HTML styles
To ensure constant screen across devices, internet browsers standardized five core script families: sans serif, serif, monospace, script, and fantasy. How’s how these people differ and what areas are the most effective.
Sans serif styles
Sans serif styles 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 connection between features and clarity isn’t sudden. As kind foundry Monotype information, sans serifs evolved out of surrealism, which emphasized operation over decoration. This background helps to explain why early adopters of sans serifs were in the fields of technology, aerospace, and health, and why these straightforward fonts still dominate much of the internet today.
The most recognized sans serifs include very popular fonts like Helvetica ( and its updated version, Helvetica Neue ), Tahoma, Verdana, and Open Sans. Trebuchet MS, Segoe UI, Lucida Sans/Lucida Sans Unicode, Gill Sans, and Fira Sans are another popular alternatives. These styles work for both system language and articles.
Serif fonts
Font styles include the small strokes that extend from the ends of letterforms, a have rooted in prints and first handwriting. Serif fonts have long been used for body language in print advertising like books, publications, and newspapers, but they are frequently associated with modern audiences.
” Even if I’m reading on my Ebook or anything, I choose a font typeface”, says Kjell. That’s likely just because I’ve always read them in books, I suppose.
Common font types include traditional fonts like Times New Roman ( developed for the Times of London ) and Garamond, as well as Palatino Linotype and Lucida Bright, a font designed for both windows and print. Serifs are less prevalent online than sans serifs, but they are becoming more and more popular on high-resolution displays and are still a popular choice when a company wants to convey tradition, , or elegance.
Monospace fonts
Monospace fonts are typefaces with the same width that all other characters, similar to text on graph paper, do. 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.
Source Code Pro and Courier New are two examples in particular. 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. Examples of well-known programs include Brush Script ( and its more closely related cousin, Brush Script MT ), Lucida Handwriting, and Zapfino.
Cursive fonts can be hard to read in long passages and are rarely used for website text. Designers can use them sparingly in headings, logos, or decorative elements where the brand’s style is supported by a handwritten feel.
Fantasy fonts
Fantasy fonts are a diverse category that includes decorative or thematic typefaces that are not related to the other families. They often mimic a specific historical or stylistic look. For instance, Papyrus gives off an antiquated, historical feel, while Chalkduster brings to mind the appearance of handwritten notes on a blackboard.
Because fantasy fonts emphasize style over readability, they’re best for display purposes like , headings, or other design elements where a distinctive personality matters more than legibility.
9 of the best HTML fonts
Here are nine popular fonts available in Shopify’s expansive theme library, which includes hundreds of .
We spoke with Kjell about how Shopify’s design team approaches font selection, font size, and more across various themes in order to demonstrate how designers use them. The fonts below highlight some of his favorites, along with other strong options. The majority of these fonts are sans serifs, which reflect how simple and versatile they are online and how few have serifs for companies that prefer a more traditional or book-like feel.
1. Literally
Category: Sans serif
Liter is a versatile Swiss-inspired sans serif, similar to Helvetica, 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 is suitable for bolder typefaces as well as a bit larger for headlines, and it makes a good statement with a smaller body copy.
Where to find it: ‘s headings, subheadings, and body copy.
2. Grotesque Briccolage
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 e-commerce brand that is a little unconventional but still approachable.
Where to find it: ‘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 designs a more contemporary twist than they otherwise would.
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 can I find it: ‘s body copy, subheadings, and page headings.
4. Chivo
Category: Sans serif
Why it’s great: Try Chivo if you’re looking for a sans serif that gives some hint at serif styling. With flourishes like a curled capital R and decorative capital I, this font feels a little more stylized than your average sans serif. Chivo’s character is prevented from having to read a lot more in the body copy because of the Ritual theme’s smart pairing with Geist for the body text.
Where to find it: ‘s headings.
5. Instrument
Sans serif and serif categories
Why it’s great: Designed as a matched pair, Instrument combines a tall, condensed serif with a looser sans. They” somehow work together,” says Kjell, “because they both have a similar hand-crafted feel to them.”
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 make it feel more contemporary.”
Where to find it: ‘s headings and subheadings ( serif ) and body copy ( sans ).
6. Newsreader
Category: Serif
Why it’s great: Newsreader is a web-based publication that is sophisticated and bookish without being bulky. Lightweight and italicized for Shopify’s Dwell theme, Kjell says the design team wanted it to feel “like a whisper”.
He claims that” Dwell is modeled after the larger housewares brands.” ” Most of the products on that demo store are soft housewares like pillows and comforters. We wanted fonts that would go well with that. So we chose one with very thin letters in a thin weight, so it feels a lot softer”.
Where can I find it: Body copy, headings, and subheadings for .
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. It has nine weights, making it suitable for many storefronts.
Where to find it: ‘s headings
8. Barlow Condensed
Category: Sans serif
This font is friendly yet authoritative, in keeping with California’s public signage. Its approachable clarity delivers the impact consumer packaged goods need, like the barbecue sauce example in Shopify’s Savor theme.
Where can I find it: Under headings and subheadings for .
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.
When you reach some of the bolder weights, it comes off as a little industrial, says Kjell. ” I like it for very formal designs or as a fallback when Helvetica feels too warm”.
Where can I find it: Body copy, headings, and subheadings for .
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. For its clean lines, a minimalist store might use a sans serif like Inter, while a more conventional business might favor a serif like Newsreader. When deciding, balance aesthetics with how easy it is to read and how many languages it supports.
What font do you find to be the most appealing?
What feels stylish to one brand might look dated to another. Options like Liter and Geist stand out among Shopify’s recommended fonts for their sleek, contemporary appeal, while Newsreader offers a more traditional, bookish elegance. The key is choosing a font that aligns with your and makes your storefront inviting.
What font types are there in HTML?
In CSS, fonts are organized into five families: serif, sans serif, fantasy, monospace, and cursive. Each individual font has numerous. Fonts can also render in different styles ( normal, italic, and bold ), with CSS controlling size, weight, , and line height ( the distance between lines of text ). These formatting options can be used with the majority of fonts.