Back

Figma Kit /

Text Styles

Text styles define the typography hierarchy and visual characteristics of text elements throughout the interface. This system uses a structured approach with six main levels (h1 to h6) and three weight variants (regular, medium, and semibold) for most levels.

Key components

  1. Heading Styles (h1 to h6):

    • Decreasing size from h1 to h6

    • Used for titles, subtitles, and section headers

  2. Paragraph Styles (p1 to p6):

    • Varying sizes for different content needs

    • Three weight options: regular, medium, and semibold

  3. Weight Variations:

    • Regular: Base weight for body text

    • Medium: Slightly emphasized text

    • Semibold: Strong emphasis or subheadings

Style characteristics

  1. h1 to h6: Large to small heading sizes

  2. p1 to p6: Decreasing text sizes for various paragraph needs

  3. Consistent spacing and line height across styles

Good practices

  1. Hierarchy: Use styles consistently to maintain clear information hierarchy

  2. Readability: Ensure appropriate font sizes and line heights for easy reading

  3. Flexibility: Leverage different weights for emphasis without changing size

  4. Responsiveness: Adjust text styles for different screen sizes

  5. Accessibility: Maintain sufficient contrast and allow text resizing

  6. Consistency: Use text styles systematically across the interface

  7. Documentation: Clearly define usage guidelines for each text style

Implementation notes

  • Use semantic HTML tags (h1, h2, p, etc.) in conjunction with these styles

  • Implement styles using CSS classes or design tokens for easy updates

Supercharge Your Workflow

This section is a part of SegmentUI Pro. SegmentUI Pro is a complete UI kit & component library for Figma & Framer as well as other design resources.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

Happy ! Use discount code for a special holiday discount!

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

What makes this special?

Is there a dark mode for the UI Kit?

Can I use it to create Framer templates?

Pricing

Can I buy components seperately?

Is this a one time payment or a subscription?

Will I get future updates if I purchase now?

Is there a free version?

Do you have a student discount?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Join our Mailing List

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say