Understand Typography

Establish a type scale

Most Season FE developers use way too many font sizes. And it makes it hard to scale up your web application and makes everything more inconsistent.

Modular scales

The solution is to have a type scale on your FE systems using ratios like 4:5, 2:3, or perhaps the "golden ratio of 1:1.618. You start with a sensible base value (16px) since it's the default font size for most browsers, apply the ratio to your next value, and then the next value, and so on. If you follow my advice,

1. You end up with fractional values.

   Using a 16px base and 4:5 ratio, your scale will end up with lots of sizes that don’t land right on the pixel, like 31.25px, 39.063px, 48.828px, etc. Browsers all handle subpixel rounding a little bit differently, so it’s best to avoid fractional sizes if you can avoid them.

   If you do want to use this approach, make sure you round the values yourself when defining the scale to avoid off-by-one pixel issues across browsers.

2. You usually need more sizes.

   This approach can work well if you’re defining a type scale for long-form content like an article, but for interface design, the jumps you get using a modular scale are often a bit too limiting.

   With a (rounded)3:4 type scale, you get sizes like 12px, 16px, 21px, and 28px. While this might not seem too limiting on the surface, in practice, you’re going to wish you had a size between 12 and 16 pixels, and another between 16 and 21 pixels. You could use a tighter ratio like 8:9, but at this point, you’re just trying to pick a scale that happens to match the sizes you already know you want.

Avoid em units

When you’re building a type scale, don’t use EM units to define your sizes. Because EM units are relative to the current font size, the computed font size of nested elements is often not a value on your scale.

Set the width of an element with the ch units

Typographers and designers have been in battle for years. What is the ideal length of a single line of text? For most fonts and languages, around 70 characters are comfortable, but it depends on characters, font, languages, design, and a bunch of other factors

.container {
  width:70ch;
}
/** so the width of the container will be 70 characters of the current
font -> if the font has a bigger font-size then the container will
get bigger **/

Responsive Typography

Using media-query

h1 {
  font-size:2rem;
}
h2 {
  font-size:1.5rem;
}

@media(min-width:48rem) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size:2rem;
  }
}
/** we'll endup writing a lot of media query condition for entire font
system **/

Using CSS variables

:root {
  --text-multiply:1;
}

@media(min-width:45rem){
 --text-multiply:1.5;
}

h1 {
  font-size: calc(2rem * var(--text-multiply));
}

h2 {
 font-size: calc(1.5rem * var(--text-multiply));
}

/** its more concise approach but we'll end up with fraction values 
and sometimes we just want to hand-pick the value for each font
without doing the math (relative size usually doesn't scale) **/

Using a CSS clamp fn (PREFER WAY)

function clamp(number,lower,upper){
    return Math.min(upper,Math.max(number,lower));
}

h1,h2 {
  font-size:clamp(var(--min),var(--val),var(--max));
}
h1 {
  min:2rem;
  val:5vw;
  max:3rem;
}
h2 {
 min:1.5rem;
 val:4vw;
 max:2.25rem;
}
/** If the viewport width is very narrow, the h1 and h2 font sizes 
will be closer to the minimum values (2rem and 1.5rem, respectively).
If the viewport width is very wide, the font sizes will approach the 
maximum values (3rem and 2.25rem, respectively). The vw unit for the 
var(--val) variable makes the font sizes responsive to 
the width of the viewport, ensuring that they scale relative to the 
screen size. **/

Add a drop-cap to your text

Drop caps—making the first letter of a paragraph or document much larger than the rest of the text—have been a stylistic element of typography for hundreds of years. In classic handwritten manuscripts, you'll often find drop-caps turned into elaborate works of art, often taking up a significant area of the page and providing illustrations supporting the material of the text itself.

p:first-of-type::first-letter {
  font-size:4em;
  float:left;
  float:inline-start;
  margin: .1em .1em .1em 0;
  background-color: hsl(0,59%,41%);
  padding: .2em .1em;
  color:white;
  text-shadow: 3px 3px 0 hsl(0,59%,41%);
}

Truncate text length and number of lines

When constraining text to specific designs, it is sometimes necessary to truncate the text. This can be done at the markup level, but in responsive environments, it is often necessary to dynamically truncate the text based on its current display.

h2 {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

Style text selection and highlighting

The browser user agent styles have pre-defined styles for all standard interactions, including selection highlighting. Use your cursor to highlight a string of text, which is typically displayed with a pale blue background.

.demo-area::selection {
  background-color:hsl(51,96%,51%);
}

Keep your line length in check

When styling paragraphs, it's easy to make the mistake of fitting the text to your layout instead of trying to create the best reading experiences

For the best reading experience, make your paragraphs wide enough to fit between 45 and 75 characters per line. The easiest way to do this on the web is to em units, which are relative to the current font size. A width of 20–35 em will get you in the right ballpark

Dealing with wider content

If you’re mixing paragraph text with images or other large components, you should still limit the paragraph width, even if the overall content area needs to be wider to accommodate the other elements.

max-width:34em;
/** It may seem counterintuitive at first to use different widths in
the same content area , but the result looks more polishes **/

Understanding the line-height property

Theline-height property describes the height of the line box—the virtual box around a single line of text. The defaultline-heightvalue of most browsers is somewhere between 1.15 and 1.2, meaning the font size multiplied by 1.2.

p {
 line-height:3;
}

Line height is proportional

The reason we add space between lines of text is to make it easy for the reader to find the next line when the text wraps

Your line height and paragraph should be proportional; narrow content can use a shorter line height like 1.5 but wide content might need a line height as tall as 2

Accounting for font size

Line length isn't the only factor in choosing the right line height. When text is small, extra line spacing is important because it makes it a lot easier for you to find the next line the text wraps

But as text gets larger, your eyes don’t need as much help. This means that for large headline text, you might not need any extra line spacing, and a line height of 1 is perfectly fine.

Base-line, not center

There are a lot of situations where we use multiple font sizes in a single line

The better approach is to use align: baseline

The result is a simpler, cleaner look than what you get when you center two pieces of text and offset their baselines

Align with readability in mind

In general, text should be aligned to match the direction of the language it’s written in. For English (and most other languages), that means that the vast majority of text should be left-aligned.

Don't center long-form text

Center alignment can look great for headlines or short, independent blocks of text

But if something is longer than two or three lines, it will almost always look better left-aligned

If you've got a few blocks of text and you want to center, the better way is to shorten the content

Right-align numbers

If you're designing a table that includes numbers, right-align them

Hyphenate-justified text

Justified text looks great in print and can work well on the web when you’re going for a more formal look, but without special care, it can create a lot of awkward gaps between words

p {
  text-align: justify;
  hyphens:auto;
}
/** Text is justified when it is aligned along both the left and 
right margins of the element, creating a straight edge on both sides. 
This results in even, neat lines of text. **/

/** To achieve this alignment, the browser adjusts the spacing 
between words and characters within the text. 
It increases or decreases the spaces between words and characters, 
as needed, to ensure the text fills the available width 
without going beyond the margins **/

/** Hyphenation: In some cases, browsers may use hyphenation 
to break long words and distribute them across multiple lines 
to maintain the alignment. However, hyphenation isn't always used, 
and it depends on the browser and language settings. **/

Justified text works best in situations where you’re trying to mimic a print look, perhaps for an online magazine or newspaper. Even then, left-aligned text works great too, so it’s just a matter of preference.

Use letter-spacing effectively

When styling text, a lot of effort is put into getting the weight, color, and line height just right, but it’s easy to forget that letter spacing can be tweaked, too. Each font-style has different letter spacing built-in

With different letter- spacing, we can create such a unique layout

Improve all-caps legibility

The letter spacing in most font families is optimized for a normal “sentence case.”

All-caps text, on the other hand, isn’t so diverse. Since every letter is the same height, using the default letter spacing often leads to text that is harder to read because there are fewer distinguishing characteristics between letters. For that reason, it often makes sense to increase the letter spacing of all-caps text to improve readability.

Your typographic tools

When you're looking at a type, it looks the way it does because someone made a design for it. All of the characteristics of that typographic design, like

This article provides useful tips and guidelines for web typography, including establishing a type scale, using responsive typography, styling text selection, managing line length and line height, and aligning text for readability. Learn how to create visually pleasing and easily readable text for various devices and screen sizes, and enhance the overall user experience with these helpful techniques.