Skip to content

Typography

Typography is how you control the appearance of text -- which font, how large, how heavy, how spaced, how aligned. The Style panel groups all text-related CSS properties under the Typography sector.

Two things to keep in mind:

  • Text styling is inherited. When you set a font on a parent, all children use it unless they override it. This makes it efficient to set typography once at the section or body level.
  • Readability comes from the combination of size, weight, line-height, and spacing -- not from any single property alone.

Choosing a font family

Font-family sets the typeface. In the Style panel, it appears as a dropdown with pre-loaded system fonts.

To add custom fonts from Google Fonts, use the Fonts plugin (grapesjs-fonts). Open the Fonts dialog, search for a font by name or category, and install it. You can select which variants (weights and styles) to include. Once installed, the font appears in the Font-family dropdown throughout the editor.

The Fonts plugin:

  • Loads fonts from Google Fonts via the Google Fonts API
  • Lets you browse by category (serif, sans-serif, display, handwriting, monospace)
  • Lets you toggle individual variants (regular, italic, 100-900 weights)
  • Generates the proper <link> tags in the page <head> for production
  • Shows a live preview of each font with sample text

You can also use CSS variables for font families, allowing you to change a typeface across your entire site from one place.

Tip: Limit yourself to 2-3 font families per site. One for headings, one for body text, and optionally one for accents or code. More than that slows down page loading and hurts visual coherence.

Setting font size

Font-size controls how large text appears. You can set it as a number with a unit, or use a keyword.

Units available in Silex: px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Keyword values: medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, initial, inherit.

Unit Meaning When to use
px Absolute pixels When you need an exact, predictable size
em Relative to the parent's font size Scaling text relative to its context
rem Relative to the root (<html>) font size Consistent scaling across the site
% Percentage of parent's font size Similar to em
vw Percentage of viewport width Fluid typography that scales with screen size
cqi Container query inline size Text that scales with its container, not the viewport

Tip: Use rem for most text. Set a base font size on the body (e.g., 16px), then define headings and body text in rem. When you change the base, everything scales proportionally. You can also define font sizes as CSS variables for even easier theming.

Controlling font weight

Font-weight determines how bold or light text appears. Silex provides a dropdown with named values:

Value Name
100 Thin
200 Extra-Light
300 Light
400 Normal
500 Medium
600 Semi-Bold
700 Bold
800 Extra-Bold
900 Ultra-Bold

Fixed values: inherit, initial, unset, auto.

Not every font supports all weights. If you choose a weight that the font file does not include, the browser picks the closest available weight. Make sure you install the corresponding variant in the Fonts dialog.

Adjusting line height

Line-height sets the vertical distance between lines of text. It is one of the most important properties for readability.

Units: px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Fixed values: normal, initial, inherit, unset.

Rule of thumb: Body text reads best at 1.4 to 1.6 times the font size. Headings can be tighter (1.1 to 1.3) because they have fewer lines. Use a unitless number (like 1.5) or em/% so line height scales with font size.

Spacing between letters and words

Letter-spacing adds or removes space between individual characters. A small positive value (0.5px or 0.02em) can improve readability of uppercase text. Negative values tighten characters together.

Units: px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax.

Fixed values: normal, initial, inherit, unset.

Word-break controls whether lines can break within words. Values: normal, break-all, keep-all, break-word. Use break-word to prevent long URLs or strings from overflowing their container.

Word-wrap (also known as Overflow-wrap) sets whether the browser may break within a word to prevent overflow. Values: normal, break-word.

Aligning text

Text-align controls horizontal alignment within the element's box.

Values: left, center, right, justified, inherit, initial, unset.

Use left for body text in left-to-right languages (this is the default and the easiest to read). Use center for headings, short labels, or hero text. Use justified sparingly -- it can create uneven "rivers" of white space in narrow columns.

Transforming text case

Text-transform changes the capitalization of text without changing the source content.

Values: none, capitalize, uppercase, lowercase.

When to use it: Navigation links, buttons, and section headings often look cleaner in uppercase. Use CSS for this rather than typing in caps -- it keeps the source text readable and lets you change your mind later.

Tip: When you use uppercase, add a small amount of Letter-spacing (0.05em or 1px) to improve readability.

Decorating text

Text-decoration is a composite property in Silex with four sub-properties:

Use case: Remove the underline from links (none) and restyle it with a custom color and wavy style on hover using a pseudo-class.

Handling overflow and whitespace

Text-overflow controls what happens when text does not fit. Values: clip, ellipsis, inherit, initial, unset.

To get the classic "truncated with dots" effect, you need three properties together:

  1. Text-overflow: ellipsis
  2. White-space: nowrap
  3. Overflow (on the same element): hidden

White-space controls how whitespace and newlines in the source are handled. Values: normal, nowrap, pre, pre-wrap, pre-line, break-spaces.

Value Collapses spaces Wraps lines
normal Yes Yes
nowrap Yes No
pre No No
pre-wrap No Yes
pre-line Yes Yes (preserves newlines)
break-spaces No Yes (breaks at spaces)

Text color

Color sets the foreground color of text. In Silex it appears as a full-width color picker in the Typography sector. You can enter hex values, rgb/rgba, hsl/hsla, or named colors. You can also apply a CSS variable to Color using the variable picker in the Style panel.

For background colors, see Colors and backgrounds.

Practical example: a heading hierarchy

  1. Select the body or a top-level Section.
  2. Font-family: your body font (e.g., "Inter"). Font-size: 16px. Line-height: 1.6. Color: a dark gray.
  3. For H1: Font-size: 2.5rem. Font-weight: 700 (Bold). Line-height: 1.2. Letter-spacing: -0.02em (tighter for large text).
  4. For H2: Font-size: 1.75rem. Font-weight: 600 (Semi-Bold). Line-height: 1.3.
  5. For small labels: Font-size: 0.75rem. Text-transform: uppercase. Letter-spacing: 0.08em. Font-weight: 500.

Because font properties inherit, the body settings cascade down to all text. You only override what changes at each heading level.

Common mistakes

  • Too many font families. Every extra font is an extra network request. Stick to 2-3.
  • Missing font variants. You set Font-weight to 600 but only installed the regular variant. The browser fakes the weight and it looks blurry.
  • Using px for everything. If you later want to scale text for accessibility or responsive design, rem and em units make it much easier.
  • Justified text in narrow columns. It creates ugly gaps. Use left alignment instead.
  • Forgetting line-height on headings. Large text with the default line-height has too much vertical space between lines.

Learn more

Advanced: font-style, container query units, and CSS variable integration

Font style

Font-style (italic, oblique, normal) is available via the built-in GrapesJS typography sector. Use it to set italic text. Make sure the italic variant is installed in the Fonts dialog, or the browser will slant the normal variant artificially (which often looks poor).

Container query units for fluid text

Instead of viewport units (vw), you can use container query units (cqi, cqw, etc.) for font size. This makes text scale relative to its nearest container with Container-type set to inline-size or size, rather than the entire viewport. This is useful for components that may appear at different sizes in different layouts.

CSS variables for font sizes

The CSS Variables plugin (grapesjs-css-variables) integrates directly with typography properties. You can create size-type variables for Font-size, Letter-spacing, and Line-height, and font-family variables for Font-family. When you click the "+" button next to any of these properties in the Style panel, a dropdown shows your defined variables. Selecting one inserts a var(--your-variable) reference. This is the recommended approach for maintaining a consistent type scale across your site.

The variable types that apply to typography: - Size variables: apply to Font-size, Letter-spacing, Line-height - Font-family variables: apply to Font-family

Reference: all typography properties
Property Type Values / Units MDN
Font-family select Installed fonts + system defaults link
Font-size number px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax; keywords: medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger, length, initial, inherit link
Font-weight select 100 (Thin), 200 (Extra-Light), 300 (Light), 400 (Normal), 500 (Medium), 600 (Semi-Bold), 700 (Bold), 800 (Extra-Bold), 900 (Ultra-Bold); inherit, initial, unset, auto link
Letter-spacing number px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax; normal, initial, inherit, unset link
Color color Any color value link
Line-height number px, %, em, rem, vh, vw, cqi, cqb, cqw, cqh, cqmin, cqmax; normal, initial, inherit, unset link
Text-align select left, center, right, justified, inherit, initial, unset link
Word-break select normal, break-all, keep-all, break-word link
Word-wrap select normal, break-word link
White-space select normal, nowrap, pre, pre-wrap, pre-line, break-spaces link
Text-decoration-line select none, underline, overline, line-through, blink; auto, inherit, initial, revert, unset link
Text-decoration-style select solid, double, dotted, dashed, wavy link
Text-decoration-color color Any color value; inherit, initial, revert, unset link
Text-decoration-thickness integer px, %, em; auto, inherit, initial, revert, unset link
Text-transform select none, capitalize, uppercase, lowercase link
Text-overflow select clip, ellipsis, inherit, initial, unset link

Quiz

Q1: You want all text on your site to use the same base font. Where is the most efficient place to set Font-family?

  • A) On every individual text element
  • B) On the body or a top-level wrapper
  • C) Only on headings
Answer

B) On the body or a top-level wrapper -- Font-family is inherited. Setting it once at the top means every child element uses it automatically. You only override it on specific elements that need a different font.

Q2: You installed a Google Font but your Semi-Bold headings look blurry and artificially thick. What went wrong?

  • A) The Font-size is too large.
  • B) You did not install the 600 (Semi-Bold) variant in the Fonts dialog.
  • C) The Line-height is wrong.
Answer

B) You did not install the 600 (Semi-Bold) variant in the Fonts dialog. -- Without the actual font file for that weight, the browser synthesizes bold by thickening the regular weight, which looks poor. Open the Fonts dialog and enable the Semi-Bold variant.

Q3: You want a card title to show "..." when the text is too long for one line. Which three properties do you need?

  • A) Text-overflow: ellipsis, White-space: nowrap, Overflow: hidden
  • B) Text-overflow: clip, Word-break: break-all, Overflow: scroll
  • C) Text-transform: uppercase, White-space: pre, Overflow: auto
Answer

A) Text-overflow: ellipsis, White-space: nowrap, Overflow: hidden -- All three are required. White-space nowrap prevents wrapping, Overflow hidden clips the content, and Text-overflow ellipsis adds the "..." indicator.

Q4: Your body text uses Font-size 16px and you want an H1 that is 2.5 times larger. Which value scales best for responsive adjustments?

  • A) Font-size: 40px
  • B) Font-size: 2.5rem
  • C) Font-size: 2.5vw
Answer

B) Font-size: 2.5rem -- Using rem means the heading scales relative to the root font size. If you change the root from 16px to 18px at a breakpoint, the heading automatically adjusts. 40px is rigid, and 2.5vw makes the heading depend on viewport width which can be too small on narrow screens.

Q5: You have navigation links in uppercase. The letters look cramped. What should you add?

  • A) Word-break: break-all
  • B) Line-height: 2
  • C) Letter-spacing: 0.05em
Answer

C) Letter-spacing: 0.05em -- Uppercase text benefits from slightly increased letter spacing for readability. This is a common typographic practice.

Edit this page on GitLab