← Back to Documentation

Working with Text

Text is fundamental to any website. This guide covers creating text blocks, formatting content, and using typography effectively in New Salon.

Text Block vs. Heading Block

New Salon offers two text-related blocks:

| Block | Best For | |-------|----------| | Text | Paragraphs, descriptions, body content | | Heading | Titles, section headers, callouts |

Use headings for structure and text blocks for detailed content.

Creating a Text Block

  1. Press T or open the block palette and select Text
  2. Click on the canvas to place the block
  3. Start typing immediately
  4. Click outside the block when finished

Editing Text

Entering Edit Mode

  • Double-click the text block
  • Or select it and press Enter

A cursor appears and you can type or edit content.

Exiting Edit Mode

  • Click outside the text block
  • Press Escape

Text Formatting

Basic Formatting

Select text and use the formatting toolbar:

| Format | Shortcut | Effect | |--------|----------|--------| | Bold | Ctrl/Cmd + B | Bold text | | Italic | Ctrl/Cmd + I | Italic text | | Underline | Ctrl/Cmd + U | Underlined text | | Strikethrough | - | ~~Crossed out~~ |

Text Alignment

Align text within the block:

  • Left - Default, text flows from left
  • Center - Text centered in block
  • Right - Text aligns to right edge
  • Justify - Even spacing across the line

Click the alignment buttons in the toolbar or use:

  • Ctrl/Cmd + Shift + L - Left
  • Ctrl/Cmd + Shift + E - Center
  • Ctrl/Cmd + Shift + R - Right

Typography Settings

Font Family

  1. Select text or the entire block
  2. Open the font dropdown in the toolbar
  3. Browse available fonts
  4. Click to apply

Available font categories:

  • Sans-serif - Clean, modern (e.g., Inter, Roboto)
  • Serif - Traditional, elegant (e.g., Playfair, Merriweather)
  • Display - Decorative, headlines (e.g., Bebas, Oswald)
  • Monospace - Fixed-width, code (e.g., JetBrains Mono)

Font Size

Change text size:

  1. Select text
  2. Use the size dropdown or input
  3. Enter a value in pixels (px) or use presets

Size recommendations:

  • Body text: 16-18px
  • Small text: 12-14px
  • Large text: 20-24px
  • Headings: 24-48px

Font Weight

Control text thickness:

  • Light (300)
  • Regular (400)
  • Medium (500)
  • Semi-bold (600)
  • Bold (700)
  • Black (900)

Not all fonts support all weights.

Line Height

Adjust spacing between lines:

  1. Select the text block
  2. Find Line Height in properties
  3. Use a multiplier (e.g., 1.5) or pixel value

Recommended line heights:

  • Body text: 1.5-1.7
  • Headings: 1.1-1.3
  • Tight: 1.2
  • Loose: 2.0

Letter Spacing

Control space between characters:

  • Normal: 0
  • Tight: -1 to -2px
  • Loose: 1-3px
  • Very loose: 4-8px (for headings)

Text Colors

Changing Text Color

  1. Select text
  2. Click the color picker in the toolbar
  3. Choose a color from:
    • Theme palette
    • Recent colors
    • Custom color picker
    • Hex/RGB input

Color Contrast

Ensure readability:

  • Dark text on light backgrounds
  • Light text on dark backgrounds
  • Minimum contrast ratio of 4.5:1 for body text
  • Use your theme colors for consistency

Adding Links

Creating a Link

  1. Select the text to link
  2. Press Ctrl/Cmd + K or click the link button
  3. Enter the URL
  4. Choose Open in new tab if external
  5. Click Apply

Link Types

  • External URL - https://example.com
  • Internal page - /about or /portfolio/project-1
  • Email - mailto:hello@example.com
  • Phone - tel:+1234567890

Removing a Link

  1. Click within the linked text
  2. Click the link button in the toolbar
  3. Click Remove Link

Working with Headings

Heading Levels

HTML headings (H1-H6) create document structure:

| Level | Usage | |-------|-------| | H1 | Page title (one per page) | | H2 | Major sections | | H3 | Subsections | | H4-H6 | Minor headings |

Creating Headings

  1. Press H or select Heading from the block palette
  2. Click to place
  3. Type your heading text
  4. Select the level from the toolbar

SEO Considerations

  • Use one H1 per page (your main title)
  • Follow a logical hierarchy (don't skip levels)
  • Include keywords naturally
  • Keep headings concise

Lists and Special Formatting

Bullet Lists

  1. Select text lines
  2. Click the bullet list button
  3. Each line becomes a list item

Numbered Lists

  1. Select text lines
  2. Click the numbered list button
  3. Items are automatically numbered

Quotes

For callouts or citations:

  1. Select text
  2. Click the quote button
  3. Text is styled as a blockquote

Text Block Properties

In the properties panel:

Content Tab

  • Edit text directly
  • Apply formatting

Style Tab

  • Background color
  • Border and shadow
  • Padding and margins

Advanced Tab

  • Custom CSS class
  • HTML attributes

Tips for Better Typography

  1. Limit fonts - Use 2-3 fonts maximum
  2. Create hierarchy - Size and weight show importance
  3. White space - Don't crowd text
  4. Consistent styling - Same styles for same purposes
  5. Mobile-friendly - Test on smaller screens

Next Steps

Working with Text - Salon Docs