Colevate Online Tech Tutorials

Variable fonts are a modern font format that packages multiple stylistic variations into a single file. Unlike static fonts needing separate files for each weight or style, a variable font is one compact file, which means faster load times. This format gives designers precise control over typography through axes like weight, width, and slant.

Example 1: Basic Implementation of a Variable Font

/* styles.css */
@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 1000; /* Define the range of weights available */
  font-stretch: 25% 151%; /* Define the range of widths available */
}
body {
  font-family: 'Roboto Flex', sans-serif;
}
h1 {
  font-weight: 700; /* Set a specific weight for the heading */
}
p {
  font-weight: 400; /* Set a standard weight for the paragraph */
}

Explanation: This code sets up a variable font using @font-face, defining available ranges for properties like font-weight. Elements then use specific values from this single font file.

Example 2: Animating Font Weight

/* styles.css */
@font-face {
  font-family: 'Amstelvar';
  src: url('Amstelvar-Roman-VF.woff2') format('woff2-variations');
  font-weight: 100 1000;
}
.animated-text {
  font-family: 'Amstelvar', serif;
  font-size: 3em;
  transition: font-weight 0.5s ease-in-out; /* Smooth transition for font-weight */
}
.animated-text:hover {
  font-weight: 900; /* Change weight on hover */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="animated-text">Hover over me!</p>
</body>
</html>

Explanation: This example animates the font-weight of a variable font on hover, creating a smooth, engaging effect possible due to all weights being in one file.

Example 3: Controlling Font Slant (Italic)

/* styles.css */
@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype-variations');
  font-style: oblique 0deg 12deg; /* Define the slant range */
}
.slanted-text {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 2em;
  font-style: oblique 10deg; /* Apply a specific slant */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="slanted-text">This text has a custom slant.</p>
</body>
</html>

Explanation: This code uses font-style to apply a precise slant angle. Variable fonts allow granular control over italics beyond simple on/off states.

Example 4: Using font-variation-settings for Custom Axes

/* styles.css */
@font-face {
  font-family: 'Decovar';
  src: url('Decovar-VF.woff2') format('woff2-variations');
}
.custom-axis-text {
  font-family: 'Decovar', sans-serif;
  font-size: 4em;
  font-variation-settings: 'TRMC' 700, 'SKLA' 1000; /* Control custom axes */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="custom-axis-text">Decovar</p>
</body>
</html>

Explanation: This example uses font-variation-settings to manipulate unique, custom axes ('TRMC', 'SKLA') of the 'Decovar' font for creative designs.

Example 5: Combining Multiple Variable Axes

/* styles.css */
@font-face {
  font-family: 'Amstelvar';
  src: url('Amstelvar-Roman-VF.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-stretch: 50% 125%;
}
.multi-axis-text {
  font-family: 'Amstelvar', serif;
  font-size: 2.5em;
  font-weight: 800; /* Set a heavy weight */
  font-stretch: 110%; /* Make the font wider */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="multi-axis-text">Wide and Bold Text</p>
</body>
</html>

Explanation: This code adjusts both font-weight and font-stretch simultaneously, demonstrating how variable fonts easily combine multiple axes for tailored text styles.

Example 6: Responsive Typography with Variable Fonts

/* styles.css */
@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
}
.responsive-variable-text {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 3vw; /* Font size relative to viewport width */
  font-weight: 400;
  transition: font-weight 0.3s linear;
}
@media (min-width: 1200px) {
  .responsive-variable-text {
    font-weight: 700; /* Heavier weight on larger screens */
  }
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="responsive-variable-text">Text that adapts its weight</h2>
</body>
</html>

Explanation: This example creates responsive typography by changing font-weight based on screen size, ensuring readability and impact across all devices.

Example 7: Fine-grained Control with font-variation-settings and CSS Custom Properties

/* styles.css */
:root {
  --text-weight: 400; /* Define a custom property for weight */
  --text-width: 100;  /* Define a custom property for width */
}
@font-face {
  font-family: 'Inter';
  src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype-variations');
}
.interactive-text {
  font-family: 'Inter', sans-serif;
  font-size: 2em;
  font-variation-settings: 'wght' var(--text-weight), 'wdth' var(--text-width); /* Use custom properties */
  transition: font-variation-settings 0.4s ease;
}
.interactive-text:hover {
  --text-weight: 800; /* Change custom property on hover */
  --text-width: 125; /* Change custom property on hover */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="interactive-text">Hover to see the change.</p>
</body>
</html>

Explanation: This code uses CSS Custom Properties to control font-variation-settings, making the code cleaner and allowing dynamic font changes like the simultaneous weight and width transition on hover.

Modern Text Properties

text-wrap: balance and text-wrap: pretty: Improving readability and avoiding orphans

The text-wrap property enhances text flow and readability. balance creates visually harmonious lines, ideal for headlines. pretty prevents "orphans" (single words on the last line), improving typographic quality. These properties achieve professional layouts easily.

Example 1: Basic text-wrap: balance for Headlines

/* styles.css */
h1 {
  width: 80%; /* Set a width for the heading */
  text-wrap: balance; /* Balances the text lines for better visual harmony */
  font-family: 'Arial', sans-serif;
  font-size: 2.5em;
  text-align: center;
  margin: 20px auto;
  padding: 10px;
  border: 2px solid #333;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a Demonstration of a Balanced Headline</h1>
</body>
</html>

Explanation: This shows basic text-wrap: balance on a heading. The browser adjusts line breaks for similar lengths, creating a symmetrical, balanced block.

Example 2: text-wrap: pretty to Prevent Orphans in Paragraphs

/* styles.css */
p {
  width: 600px; /* Define a fixed width for the paragraph */
  text-wrap: pretty; /* Prevents a single word from appearing on the last line */
  font-family: 'Georgia', serif;
  font-size: 1.1em;
  line-height: 1.6;
  margin: 20px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is an excellent example of how the 'text-wrap: pretty' property works. Without it, the very last word of this text might end up all by itself on a new line, which is called an orphan. By applying this CSS rule, the browser will adjust the text to avoid this situation.</p>
</body>
</html>

Explanation: text-wrap: pretty applied to a paragraph prevents a single word from being stranded on the last line, improving flow and professionalism.

Example 3: Comparing text-wrap: balance and text-wrap: pretty

/* styles.css */
.balanced-heading {
  width: 90%;
  text-wrap: balance;
  font-family: 'Verdana', sans-serif;
  font-size: 2em;
  border: 2px dashed #007bff;
  padding: 15px;
  margin-bottom: 20px;
}
.pretty-paragraph {
  width: 550px;
  text-wrap: pretty;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.2em;
  border: 2px dashed #28a745;
  padding: 15px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="balanced-heading">A Balanced Heading for Improved Visual Flow</h2>
<p class="pretty-paragraph">This paragraph uses 'text-wrap: pretty' to avoid having a lone word on its final line. This is a subtle but important detail for good typography, and it makes the overall reading experience much smoother for everyone.</p>
</body>
</html>

Explanation: This compares the two: balance evens heading lines for uniformity, while pretty prevents orphaned words in the paragraph below.

Example 4: text-wrap in a Responsive Design Context

/* styles.css */
.responsive-heading {
  width: 75%;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.2em;
  border: 2px solid #dc3545;
}
@media (max-width: 768px) {
  .responsive-heading {
    text-wrap: balance; /* Apply balance only on smaller screens */
    font-size: 1.8em;
  }
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="responsive-heading">A Heading That Balances on Smaller Screen Sizes</h2>
</body>
</html>

Explanation: This applies text-wrap: balance responsively. The heading text balances only on screens 768px or narrower, where it greatly improves readability.

Example 5: Using text-wrap: pretty with Justified Text

/* styles.css */
.justified-text {
  width: 700px;
  text-align: justify; /* Justify the text */
  text-wrap: pretty;   /* Prevent orphans in justified text */
  font-family: 'Garamond', serif;
  font-size: 1.15em;
  line-height: 1.7;
  border: 1px solid #ccc;
  padding: 20px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="justified-text">When text is justified, the spacing between words is adjusted to create a straight edge on both the left and right sides. Using 'text-wrap: pretty' here is especially helpful because it prevents an orphan word on the last line, which can look particularly awkward in a justified text block.</p>
</body>
</html>

Explanation: This combines text-wrap: pretty with justified text, preventing awkward single words on the last line in a fully justified paragraph.

Example 6: text-wrap: balance on a Blockquote

/* styles.css */
blockquote {
  width: 50%;
  margin: 30px auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-left: 5px solid #007bff;
  font-style: italic;
  font-size: 1.3em;
  text-wrap: balance; /* Balance the lines of the quote */
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<blockquote>"The ability to balance text within a container is a significant step forward for web typography."</blockquote>
</body>
</html>

Explanation: This applies text-wrap: balance to a <blockquote>, making the quoted text visually appealing and easier to read with similar line lengths.

Example 7: Fine-tuning with text-wrap: pretty and Other Properties

/* styles.css */
.fine-tuned-paragraph {
  max-width: 650px;
  margin: 20px;
  padding: 15px;
  font-family: 'Lato', sans-serif;
  font-size: 1.2em;
  line-height: 1.8;
  letter-spacing: 0.5px; /* Add some letter spacing */
  text-wrap: pretty; /* Ensure no orphans */
  background-color: #e9ecef;
}

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="fine-tuned-paragraph">In this final example, 'text-wrap: pretty' is used alongside other typographic properties like 'line-height' and 'letter-spacing'. This demonstrates how 'text-wrap: pretty' can be part of a holistic approach to creating beautifully crafted and highly readable text on the web.</p>
</body>
</html>

Explanation: This demonstrates text-wrap: pretty as part of a complete typographic toolkit, working with line-height and letter-spacing for a polished, readable text layout.