rick@tillitsdone.com

+66824564755

Scroll to discover

Mastering CSS Font-Synthesis for Better Typography

Discover how to use CSS font-synthesis to control synthesized typefaces like bold, italic, and small-caps.

Learn about available options and enhance your web design's readability.

Introduction

The font-synthesis CSS property lets you control whether the browser can create bold, italic, small-caps, and subscript/superscript typefaces when they’re missing in your specified font-family. This feature is widely supported and improves the visual appeal and readability of your web pages.

Baseline Compatibility

The font-synthesis property is well-supported across many devices and browsers. It’s been available since January 2022, making it a reliable choice for web developers.

Constituent Properties

The font-synthesis property is a shorthand for several individual CSS properties:

font-synthesis-weight: Controls the synthesis of the bold typeface.
font-synthesis-style: Controls the synthesis of the italic typeface.
font-synthesis-small-caps: Manages the synthesis of the small-caps typeface.
font-synthesis-position: Dictates the synthesis of subscript and superscript typefaces.

Syntax

The font-synthesis property uses a simple syntax to specify which type styles the browser can synthesize:

/* None or one or more of the other keyword values */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /* Property values can be in any order */
font-synthesis: style small-caps weight position; /* Property values can be in any order */

/* Global values */
font-synthesis: inherit;
font-synthesis: initial;
font-synthesis: revert;
font-synthesis: revert-layer;
font-synthesis: unset;

Values

The font-synthesis property can take several keyword values:

none: No bold, italic, or small-caps typeface may be synthesized.
weight: Missing bold typeface may be synthesized.
style: Italic typeface may be synthesized.
small-caps: Small-caps typeface may be synthesized.
position: Subscript and superscript typefaces may be synthesized.

Formal Definition

Initial Value: weight style small-caps position
Applies to: All elements and text. It also applies to ::first-letter and ::first-line.
Inherited: Yes
Computed Value: As specified
Animation Type: Discrete

Formal Syntax

font-synthesis =
  none                                           |
  [ weight || style || small-caps || position ]

Examples

Enabling and Disabling Font Synthesis

Font synthesis allows browsers to generate missing font styles like bold, italic, and small-caps. This can be useful, but sometimes it can affect the readability of text. Here’s how to control font synthesis for better web design.

HTML

<pre> DEFAULT </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS DISABLED </pre>
<p class="english no-syn">
  This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS ENABLED FOR WEIGHT AND STYLE </pre>
<p class="english syn-weight-style">
  This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese syn-weight-style">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS ENABLED FOR SMALL-CAPS </pre>
<p class="english syn-small-caps">
  This font supports <span style="font-variant: small-caps;">small-caps</span>.
</p>
<p class="chinese syn-small-caps">这个字体支持<span style="font-variant: small-caps;">小写大写字母</span></p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.chinese {
  font-family: "Ma Shan Zheng";
}
.no-syn {
  font-synthesis: none;
}
.syn-weight-style {
  font-synthesis: weight style;
}
.syn-small-caps {
  font-synthesis: small-caps;
}

Disabling Font Synthesis for a Specific Language

You can use the :lang() pseudo-class to disable font synthesis for a specific language. Here’s how to disable it for Arabic.

HTML

<pre> DEFAULT </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="arabic">هذا الخط يدعم <strong>النص العريض</strong> و <em>النص المائل</em></p>
<br />

<pre> SYNTHESIS IS DISABLED FOR ARABIC </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="arabic no-syn-arabic">هذا الخط يدعم <strong>النص العريض</strong> و <em>النص المائل</em></p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.arabic {
  font-family: "Ma Shan Zheng";
}
.no-syn-arabic {
  font-synthesis: none;
}

Disabling Font Synthesis for All Text

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disabling Font Synthesis</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Disabling Font Synthesis for All Text</h1>
  <p class="no-syn">This text will not have any synthesized typefaces.</p>
  <p>This text may have synthesized typefaces if the font does not include them.</p>
</body>
</html>

CSS

body {
  font-synthesis: none;
}

.no-syn {
  font-weight: bold;
  font-style: italic;
}

Disabling Font Synthesis for a Specific Language

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Disabling Font Synthesis for Arabic</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Disabling Font Synthesis for Arabic</h1>
  <p lang="ar">هذا النص سيكون بدون تخليق الأنماط النصية.</p>
  <p lang="en">This text may have synthesized typefaces if the font does not include them.</p>
</body>
</html>

CSS

*:lang(ar) {
  font-synthesis: none;
}

p[lang="ar"] {
  font-weight: bold;
  font-style: italic;
}

Browser Compatibility

The font-synthesis property is widely supported across many devices and browser versions.

Browser	Version
Chrome	97+
Edge	97+
Firefox	34+
Opera	83+
Safari	9+

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.