How to Write Prompt for Typography CSS | Web Design

Typography Studio

Customise type, spacing, colour and alignment. Click the floating Preview button to see your design live.

1. Text Content

Small top label

H1 — Main Heading Typography Shapes Ideas

H2 — Secondary Heading Make Every Word Count

H3 — Supporting Heading Small details. Stronger communication.

Body Text Typography is more than choosing a font. Size, spacing, weight, contrast and alignment work together to make information clear and memorable.

Button / Call-to-action Text

2. Typography Settings

Choose text element to edit H1 — Main Heading H2 — Secondary Heading H3 — Supporting Heading Body Text Small Top Label Button Text

Font Family Arial Georgia Times New Roman Verdana Tahoma Trebuchet MS Impact Courier New System UI Generic Sans-serif Generic Serif Generic Monospace

Font Size (px)

Font Weight Light — 300 Regular — 400 Medium — 500 Semi Bold — 600 Bold — 700 Extra Bold — 800 Black — 900

Text Colour

Line Height

Letter Spacing (px)

Word Spacing (px)

Text Alignment Left Centre Right Justify

Text Transform Normal UPPERCASE lowercase Capitalize Words

Font Style Normal Italic Oblique

Text Decoration None Underline Line Through Overline

Text Width (%)

Text Opacity (%)

Select an element, adjust its settings, then press Apply. Changes appear in the preview popup.

3. Design & Background

Preview Background

Canvas Outer Background

Inner Padding (px)

Corner Radius (px)

Divider Colour

Button Background

Button Text Colour

Button Corner Radius (px)

4. Quick Typography Presets

Generated CSS

Copy this CSS to reuse the current typography styling in your own webpage.

Generated HTML

This HTML snippet contains your current preview text and typography styling.

Live Typography Preview

DESIGN • TYPOGRAPHY • CREATIVE

Typography Shapes Ideas

Make Every Word Count

Small details. Stronger communication.

Typography is more than choosing a font. Size, spacing, weight, contrast and alignment work together to make information clear and memorable.

Explore the Design

Changes update automatically when you apply them.

LET'S DO THIS TOGETHER

READY TO MAKE
SOMETHING HAPPEN?

Have a project, idea, or challenge? Tell us what you want to achieve. Let's start with a conversation.

01 TELL US ABOUT YOURSELF

Your Name *

Phone Number *

Email Address

02 CHOOSE YOUR MISSION

What should your brand achieve? Choose your objective Generating Leads Building Brand Value Go Viral Digital Strategy Media Production Social Media Optimisation Comprehensive Research AI Workflows & Automation Something Else

Tell Us More *

Your details will be included in a WhatsApp message. WhatsApp will open for you to review and send your enquiry.

Direct Contact

89812 09009 ↗

WhatsApp Us

TAP TO CHAT ↗