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 conventional applications, which are 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.
An HTML style is what?
An style is simply a logo displayed on a website page. Font choices in the early times of the online depended on the fonts installed on a person’s system, such as family, size, and style.
Today, those details are handled through ( CSS), the language that styles web pages, and most styles are delivered through web files from online machines. 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 officially correct term. People also frequently use it to identify any style on a website.
HTML fonts vs. write styles
While HTML styles were created for use on electric screens, ink on paper and printing presses are the preferred method.
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 ends of letterforms like in Times New Roman or Garamond, was first discovered in ancient Roman stone texts and in the conversion of written aspects to sculpted or printed designs.
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 started to exist, 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 made text flow with longer sections more clearly for screen reading for years. But on current features, the change in readability between font and sans serif fonts is minimal.
The technological hiccups that predominated sans serif fonts are becoming less and less important as high-resolution and retina screens become commonplace. More web developers are now revisiting serif fonts online, blending write history with modern quality.
How do CSS style people function?
Cascading Style Sheets ( CSS) is a scripting language that describes how HTML elements may appear on a web site. While CSS controls the visual presentation, including fonts, colors, spacing, and layout, HTML provides the structure and content ( headings, paragraphs, images, links, etc. ). Collectively, they turn standard content into a smooth, user-friendly design.
CSS has two ways to fill fonts:
- Pre-installed structure styles. Because they come pre-installed on most operating systems, fonts like Arial or Times New Roman are frequently referred to as online healthy styles and are guaranteed to function on any system.
- Managed online styles. These fonts, like those from , are delivered as online site style files, giving designers more selection 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 offer fallback options to keep websites readable if something fails. 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 typography 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 weight, it returns to web safe system font with an equivalent sans font style, such as Arial or a . If Arial isn’t available, the computer displays any directly installed sans font style to ensure the site remains understandable.
HTML font people
To ensure constant screen across devices, internet browsers standardized five core script families: sans serif, serif, monospace, script, and fantasy. Here’s how these individuals differ and where they’re most successful.
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 quality is not accidental. As kind foundry Monotype information, sans serifs evolved out of surrealism, which emphasized features over decoration. This background helps to explain why early adopters of sans serifs were in the fields of technology, aircraft, and health, and why these straightforward fonts still occupy 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. Trebuchet MS, Segoe UI, Lucida Sans/Lucida Sans Unicode, Gill Sans, or Fira Sans are another popular choices. 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. Font designs are frequently associated with print media like books, newspapers, and magazines because they’ve long been used for physique words.
” Even if I’m reading on my Ebook or something, I choose a font typeface”, says Kjell. That’s definitely 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
Similar to text written on graph paper, monospace fonts have the same width as text, but with the same character spacing. 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.
Examples of popular applications include Courier New and Source Code Pro. 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 names include Brush Script ( and its more closely related counterpart, 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 top 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 their simple, yet effective online appearance. A few serifs are also included for companies that want a more traditional or book-like feel.
1. Literally speaking,
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 bric-o-lage
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. Useful, in my opinion, 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. The Ritual theme cleverly combines Geist and Geist for the body text to prevent Chivo’s character from getting more in-depth readings in the body copy.
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 “work together somehow because they both have a similar hand-made feel,” 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,” according to the sans, which makes 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 both classy and bookish. 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 evoke that feeling. So we chose one with very thin letters in a thin weight, so it feels a lot softer”.
Where can I find it: ‘s body copy, headings, and subheadings.
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. Interstellar
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 start to push some of the bolder weights,” 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 isn’t a 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 has numerous distinct fonts. 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 are available for the majority of fonts.