Font Size and Font Weight are two important typography properties used in Figma to control the scale, visual emphasis, hierarchy, readability, and overall appearance of text. Font size determines how large or small the characters appear, while font weight controls the visual thickness of the characters.
Both properties work together with font family, line height, letter spacing, text width, and other typography settings to create clear and consistent interfaces for websites, mobile applications, dashboards, landing pages, e-commerce products, design systems, and digital products. JustAcademy Figma Training can help you learn Figma, typography, UI design, and practical design workflows systematically. You can also use Register for Figma Course Demo to explore the course.
Font size defines the scale of text characters. In Figma, font size is a typography property that controls the size of the text content rather than the dimensions of the text layer's bounding box.
Font Size
|
+-- Small Text
+-- Body Text
+-- Subheading
+-- Heading
+-- Display Text
|
v
Controls Text Scale
A larger font size generally creates stronger visual emphasis, while a smaller font size is commonly used for supporting information, captions, labels, and secondary content.
Font weight describes the thickness or visual density of the characters in a font. Different font families provide different sets of weights. Common weights include Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, and Black.
Font Weight
|
+-- Thin
+-- Extra Light
+-- Light
+-- Regular
+-- Medium
+-- Semibold
+-- Bold
+-- Extra Bold
+-- Black
Not every font family contains every weight, so the available choices depend on the selected font family.
Font size and font weight control different aspects of typography. Font size changes the scale of the characters, while font weight changes their visual thickness.
| Property | Controls | Example |
|---|---|---|
| Font Size | Scale of text | 16, 24, 32 |
| Font Weight | Thickness of text | 400, 500, 600, 700 |
| Font Family | Letterform design | Inter, Roboto, Helvetica |
| Line Height | Vertical spacing between lines | 24, 32 |
| Letter Spacing | Space between characters | 0, 0.5 |
Font size and weight help users understand the importance and relationship between different pieces of information. They are essential for creating visual hierarchy and readable interfaces.
Figma provides a Font Size control in the Typography section of the right sidebar. After selecting a text layer, you can adjust the font size using the size field or available controls.
Select Text Layer
|
v
Typography Section
|
v
Font Size
|
+-- Enter Value
+-- Increase
+-- Decrease
|
v
Review Text
Figma represents text size using density-independent units in the design environment. When translating designs to code, the corresponding CSS pixel value can be inspected in Dev Mode.
Select Text
|
v
Typography
|
v
Font Size
|
v
Enter Value
|
v
Apply
|
v
Review Layout
The following values are common examples used in UI design. They are not fixed rules and should be adapted to the product, platform, font family, and design system.
| Size | Typical Role |
|---|---|
| 10 | Very small metadata or special cases |
| 12 | Caption and secondary information |
| 14 | Small body text and labels |
| 16 | Common body text size |
| 18 | Large body or supporting text |
| 20 | Small heading or prominent label |
| 24 | Subheading |
| 28 | Section heading |
| 32 | Large heading |
| 40 | Major heading |
| 48 | Display or hero heading |
| 64+ | Large display typography |
Font weight can be selected from the typography controls after choosing a font family. The available weight names depend on the selected family.
Font Family
|
v
Font Style / Weight
|
+-- Thin
+-- Light
+-- Regular
+-- Medium
+-- Semibold
+-- Bold
+-- Black
|
v
Apply Weight
Font weights are often represented using numeric values when translated into web development. The exact available weights depend on the font.
| Weight | Common Numeric Representation | Typical Use |
|---|---|---|
| Thin | 100 | Large decorative text |
| Extra Light | 200 | Display typography |
| Light | 300 | Large headings |
| Regular | 400 | Body text |
| Medium | 500 | Labels and controls |
| Semibold | 600 | Subheadings and buttons |
| Bold | 700 | Strong headings |
| Extra Bold | 800 | Display headings |
| Black | 900 | Very strong display text |
These numeric values are common conventions, but the actual mapping can vary by font family and implementation.
Font size is one of the primary tools for creating visual hierarchy. Larger text usually attracts attention before smaller supporting content.
Display Heading
64
|
v
Main Heading
40
|
v
Section Heading
28
|
v
Body Text
16
|
v
Caption
12
A good hierarchy helps users understand which information is most important without reading every word.
Font weight can strengthen hierarchy without changing the font family. A semibold or bold heading can stand out from regular body text.
Page Title
Bold
|
v
Section Heading
Semibold
|
v
Body Text
Regular
|
v
Caption
Regular
The strongest hierarchy usually comes from combining size and weight rather than relying on only one property.
| Element | Example Size | Example Weight |
|---|---|---|
| Display | 56 | 700 |
| H1 | 40 | 700 |
| H2 | 32 | 600 |
| H3 | 24 | 600 |
| Body | 16 | 400 |
| Label | 14 | 500 |
| Caption | 12 | 400 |
Typography
|
+-- Font Family
|
+-- Font Size
| |
| +-- Small
| +-- Medium
| +-- Large
|
+-- Font Weight
|
+-- Light
+-- Regular
+-- Medium
+-- Bold
+-- Black
Typography becomes more effective when these properties are intentionally combined rather than selected independently.
Headings generally require larger sizes than body text so that users can identify sections quickly.
H1: 40
H2: 32
H3: 24
H4: 20
Body: 16
The actual values should depend on the product's typography scale and the visual characteristics of the chosen font family.
Headings commonly use medium, semibold, bold, or another strong weight to establish importance.
H1
40 / Bold
H2
32 / Semibold
H3
24 / Semibold
Body
16 / Regular
Body text should be large enough to read comfortably while fitting naturally into the layout. A commonly used starting point for interface body text is around 16, but the appropriate value depends on the font and platform.
Body Text
|
+-- Readable Size
+-- Comfortable Line Height
+-- Appropriate Text Width
+-- Suitable Weight
|
v
Readable Paragraph
Regular weight is commonly used for body content because it provides a neutral visual appearance. Medium or semibold can be used selectively for emphasis.
| Content | Typical Weight |
|---|---|
| Paragraph | Regular |
| Important phrase | Medium or Semibold |
| Subheading | Semibold |
| Strong heading | Bold |
Button labels need to remain readable and visually balanced within their containers. Button typography should be tested with short and long labels.
+----------------------+
| Create Account |
+----------------------+
A typical button may use a medium or semibold weight, but the final choice should match the design system.
Navigation text should be easy to scan and should remain readable across desktop and mobile layouts.
Home | Products | Pricing | About | ContactNavigation labels often use regular or medium weight depending on the product hierarchy.
Forms contain labels, input text, helper text, error messages, and buttons. Using a consistent size and weight system makes forms easier to understand.
Email Address
Password
[ **************** ]
Minimum 8 characters.
[ Sign In ]
| Form Element | Example Size | Example Weight |
|---|---|---|
| Field Label | 14 | 500 |
| Input Text | 16 | 400 |
| Helper Text | 12 or 14 | 400 |
| Error Message | 12 or 14 | 400 or 500 |
| Button | 14 or 16 | 500 or 600 |
Dashboards contain metrics, labels, table data, filters, navigation, and supporting information. Font size and weight can help users identify important values quickly.
| Dashboard Element | Example Size | Example Weight |
|---|---|---|
| Page Title | 32 | 700 |
| Metric Value | 32 | 700 |
| Metric Label | 14 | 400 |
| Table Header | 14 | 600 |
| Table Content | 14 | 400 |
| Helper Text | 12 | 400 |
E-commerce interfaces use typography for product names, prices, discounts, ratings, delivery information, and calls to action.
Wireless Headphones
16 / 600
₹2,499
28 / 700
20% OFF
14 / 600
Free Delivery
14 / 400
[ Add to Cart ]
16 / 600
Mobile interfaces have limited screen space. Typography should remain readable without consuming unnecessary space.
Mobile Typography
|
+-- App Title
+-- Section Heading
+-- Body
+-- Label
+-- Button
+-- Caption
Test font sizes on actual mobile-sized frames and with realistic content.
Landing pages often use large display typography for the hero section and smaller supporting text for descriptions.
Hero Heading
48 - 64
Supporting Text
18 - 20
CTA
14 - 16
These are example ranges rather than fixed requirements.
Brands can use different weights to establish personality and hierarchy. A bold display style may communicate strength, while a lighter style may create an elegant appearance.
| Weight Direction | Possible Visual Character |
|---|---|
| Light | Elegant and subtle |
| Regular | Neutral and readable |
| Medium | Balanced and clear |
| Semibold | Confident and structured |
| Bold | Strong and prominent |
| Black | Powerful and display-oriented |
Font size and line height should be considered together. Increasing font size without adjusting line height can make multi-line text feel cramped.
Font Size
|
v
Line Height
|
v
Text Block
|
v
Readable Spacing
| Text | Example Size | Example Line Height |
|---|---|---|
| Heading | 32 | 40 |
| Body | 16 | 24 |
| Small Text | 14 | 20 |
These values are examples and should be adjusted according to the font family and design.
Font size can affect how letter spacing feels. Large display text may use different tracking from body text, while uppercase labels may sometimes require additional spacing.
Display
BUILD BETTER
Body
Build better products.
Label
S U B M I T
Always evaluate letter spacing visually at the final size.
Heavier weights can appear visually denser. Letter spacing can sometimes be adjusted to create better balance, particularly in display typography and uppercase labels.
Bold + Tight Spacing
HEADLINE
Medium + Normal Spacing
HEADLINE
Regular + Increased Spacing
H E A D L I N E
Larger font sizes can cause headings to wrap across multiple lines. Designers should test text width together with font size.
Large Width
Build Better Digital Products
Limited Width
Build Better
Digital Products
Mobile Width
Build Better
Digital
Products
Text resizing and wrapping should be considered when designing responsive layouts.
Font weight affects how dense text appears. Extremely light or extremely heavy weights may reduce readability in certain contexts, especially at small sizes.
Typography should be designed with readability and accessibility in mind. Small text can become difficult to read, especially on smaller screens or for users who need larger text.
Font weight should support readability rather than simply creating visual decoration. Very light weights can become difficult to read, while excessive use of bold can reduce hierarchy.
Readable Typography
|
+-- Appropriate Size
+-- Appropriate Weight
+-- Good Contrast
+-- Comfortable Line Height
|
v
Better Accessibility
A typography scale is a structured set of font sizes used consistently throughout a product. It helps create predictable relationships between headings, body text, labels, and supporting content.
Typography Scale
|
+-- Display
+-- H1
+-- H2
+-- H3
+-- Body Large
+-- Body Regular
+-- Body Small
+-- Label
+-- Caption
| Style | Size | Weight | Possible Usage |
|---|---|---|---|
| Display | 56 | 700 | Hero section |
| H1 | 40 | 700 | Page title |
| H2 | 32 | 600 | Section title |
| H3 | 24 | 600 | Subsection |
| Body Large | 18 | 400 | Lead paragraph |
| Body | 16 | 400 | Main content |
| Body Small | 14 | 400 | Supporting content |
| Label | 14 | 500 | Controls |
| Caption | 12 | 400 | Metadata |
A modular scale uses a consistent relationship between text sizes. The ratio can be selected according to the product's visual requirements.
Base Size
16
|
v
Next Level
20
|
v
Next Level
25
|
v
Next Level
32
|
v
Next Level
40
|
v
Display
50+
The exact ratio is a design decision. A scale should be evaluated visually rather than followed mechanically.
Figma text styles can store typography properties including font family, font weight, font size, line height, letter spacing, and other supported type properties. This makes font size and weight reusable throughout a design.
Text Style
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Reusable Typography
Text style names should be easy to understand and maintain. Semantic naming can be useful because it describes the purpose of the style rather than only its numerical values.
Typography
|
+-- Display/Large
+-- Heading/H1
+-- Heading/H2
+-- Heading/H3
+-- Body/Large
+-- Body/Regular
+-- Body/Small
+-- Label/Medium
+-- Caption/Small
| Style Name | Example Size | Example Weight | Purpose |
|---|---|---|---|
| Heading/H1 | 40 | 700 | Main page heading |
| Heading/H2 | 32 | 600 | Section heading |
| Heading/H3 | 24 | 600 | Subsection heading |
| Body/Regular | 16 | 400 | Paragraphs |
| Label/Medium | 14 | 500 | Labels |
| Caption/Small | 12 | 400 | Metadata |
A design system should define a consistent typography scale so that designers and developers can use predictable sizes and weights across components and screens.
Design System
|
+-- Font Family
|
+-- Font Size Scale
| |
| +-- Display
| +-- Heading
| +-- Body
| +-- Label
| +-- Caption
|
+-- Font Weight Scale
|
+-- Regular
+-- Medium
+-- Semibold
+-- Bold
Figma variables can be used to store reusable numeric values, including font size. This can help create scalable and maintainable design systems.
Typography Variables
|
+-- Font/Size/XS
+-- Font/Size/SM
+-- Font/Size/MD
+-- Font/Size/LG
+-- Font/Size/XL
+-- Font/Size/Display
Using variables can reduce repeated manual values and make typography systems easier to update.
Numeric variables can also represent font weight values. This allows a design system to define reusable weight tokens.
Font Weight Tokens
|
+-- Regular = 400
+-- Medium = 500
+-- Semibold = 600
+-- Bold = 700
Whether a particular variable workflow is appropriate depends on the design system and the properties supported by the selected font.
Font sizes often need to adapt to different screen sizes. A heading that works well on desktop may become too large on a mobile screen.
Desktop
56 Heading
|
v
Tablet
44 Heading
|
v
Mobile
32 Heading
These values are examples. Responsive typography should be tested according to the content, layout, platform, and design system.
Font weight does not always need to change between screen sizes. In many interfaces, the same weight can be maintained while the font size changes.
Desktop
40 / Bold
|
v
Tablet
36 / Bold
|
v
Mobile
32 / Bold
The important goal is to preserve hierarchy and readability.
Desktop screens provide more horizontal space, allowing designers to use larger headings and wider text blocks.
Desktop
+--------------------------------+
| Build Better Products |
| |
| Design and collaborate |
| with your team. |
+--------------------------------+
Tablet layouts require a balance between desktop and mobile typography. Headings may need smaller sizes to avoid unnecessary wrapping.
Tablet
+--------------------------+
| Build Better Products |
| |
| Design and collaborate |
| with your team. |
+--------------------------+
Mobile typography should prioritize readability, hierarchy, and efficient use of limited space.
Mobile
+----------------+
| Build Better |
| Products |
| |
| Design and |
| collaborate |
| with your team.|
+----------------+
Large headings should always be tested with realistic content. A short heading may fit on one line while a longer heading may wrap into multiple lines.
Short Heading
Build Better
Long Heading
Build Better Digital Products
Very Long Heading
Build Better Digital Products
With Your Creative Team
Adjust the font size, width, line height, or layout when necessary.
Weight can be used to emphasize selected words or content. However, excessive bold text can reduce the effectiveness of emphasis.
Regular:
Design better products faster.
Possible approach:
Design = Semibold
better products faster = Regular
Button text should be large enough to read comfortably and small enough to fit naturally inside the component.
| Button Type | Example Size | Example Weight |
|---|---|---|
| Primary Button | 16 | 600 |
| Secondary Button | 14 | 500 |
| Small Button | 12 or 14 | 500 |
Cards commonly contain a title, description, metadata, price, status, and action. A clear size and weight hierarchy makes card content easier to scan.
Card
|
+-- Title
| 20 / 600
|
+-- Description
| 14 / 400
|
+-- Metadata
| 12 / 400
|
+-- Action
14 / 600
Navigation menus should use a consistent size and weight so users can quickly identify available options.
Navigation
|
+-- Home
+-- Products
+-- Services
+-- Pricing
+-- Contact
Active navigation items may use a stronger weight or other visual treatment to communicate the current location.
Font weight can help distinguish an active navigation item from inactive items.
Inactive
Home Regular
Active
Products Semibold
Inactive
Contact Regular
Weight should not be the only indicator of important states when accessibility requires additional visual cues.
Data dashboards often use different sizes for metric values, labels, legends, and supporting information.
Total Revenue
₹8,45,000
32 / 700
Monthly Revenue
14 / 400
January
₹1,25,000
14 / 400
Important numbers can use stronger weights while supporting labels remain regular.
| Element | Example Weight |
|---|---|
| Primary Metric | 700 |
| Metric Label | 400 |
| Chart Label | 400 |
| Chart Heading | 600 |
| Table Header | 600 |
Pricing interfaces often use large font sizes for the main price and smaller sizes for billing details or supporting information.
Pro Plan
₹999
per month
Includes:
Unlimited projects
Priority support
[ Start Free Trial ]
The price can receive stronger visual emphasis through both size and weight.
Error messages should be readable without dominating the interface. The appropriate size depends on the product and component.
Password
[ ******** ]
Password must contain at least
8 characters.
Use consistent typography for validation messages across the product.
A semibold or medium weight can be used selectively for important parts of an error message, while the rest remains regular.
Error:
Password is required.
Suggested hierarchy:
"Error" = Semibold
Message = Regular
Different languages can produce different text lengths. Typography should be tested with translated content because a fixed font size can produce different wrapping behavior across languages.
English
Create Account
German
Konto erstellen
Longer Translation
Create your new account now
Test real translated strings before finalizing responsive typography.
Different scripts and fonts may have different visual density at the same nominal weight. Multilingual interfaces should therefore be tested visually rather than assuming identical appearance across scripts.
Numbers often require strong visual hierarchy in dashboards, financial applications, analytics tools, and e-commerce interfaces.
Total Revenue
₹8,45,000
32 / 700
Orders
3,240
24 / 600
Growth
98.75%
16 / 500
Important numerical values can use stronger weights, while labels and explanatory content can use regular weights.
| Number Type | Example | Weight |
|---|---|---|
| Primary Metric | ₹8,45,000 | 700 |
| Secondary Metric | 3,240 | 600 |
| Supporting Number | 128 | 400 |
Text styles allow font size and weight to be reused consistently across text layers. This is especially useful when building a design system.
Text Style
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Apply to Multiple Text Layers
When a shared text style is updated, the change can propagate to text layers using that style. This makes global typography adjustments easier to manage.
Text Style
|
v
Update Font Size
|
v
Update Font Weight
|
v
Save Style
|
v
All Linked Text Layers
|
v
Updated Typography
Developers can inspect typography properties in Figma Dev Mode. This helps communicate font family, font size, font weight, line height, and letter spacing for implementation.
Figma Design
|
v
Text Layer
|
v
Dev Mode
|
+-- Font Family
+-- Font Size
+-- Font Weight
+-- Line Height
+-- Letter Spacing
|
v
Development
| Figma Property | Typical CSS Equivalent |
|---|---|
| Font Family | font-family |
| Font Size | font-size |
| Font Weight | font-weight |
| Line Height | line-height |
| Letter Spacing | letter-spacing |
body {
font-family: "Inter", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
h1 {
font-size: 40px;
font-weight: 700;
line-height: 48px;
}
The CSS values are conceptual examples. Exact implementation should follow the production font, platform, browser behavior, and project design system.
Choose Font Family
|
v
Understand Content
|
v
Define Hierarchy
|
v
Choose Base Font Size
|
v
Create Typography Scale
|
v
Select Font Weights
|
v
Set Line Height
|
v
Set Letter Spacing
|
v
Create Text Styles
|
v
Test Real Content
|
v
Test Responsive Layout
|
v
Review Accessibility
|
v
Document Typography System
Create a typography system for a modern website.
Website Typography
Hero Heading
56 / 700
Section Heading
32 / 600
Body Text
16 / 400
Button
16 / 600
Caption
12 / 400
Create a dashboard using font size and weight to establish clear metric hierarchy.
Analytics Dashboard
Total Revenue
₹8,45,000
32 / 700
Total Orders
3,240
28 / 700
Active Users
12,450
28 / 700
Pending
128
24 / 600
Labels
14 / 400
Create an e-commerce product card using different sizes and weights.
Wireless Headphones
20 / 600
Premium wireless audio experience.
14 / 400
₹2,499
24 / 700
20% OFF
14 / 600
Free Delivery
14 / 400
[ Add to Cart ]
16 / 600
Create a typography system for a mobile application.
Profile
Welcome Back
28 / 700
Account Settings
18 / 600
Notifications
16 / 400
Security
16 / 400
Password
14 / 500
[ Change Password ]
14 / 600
Create a landing page typography system using display, heading, body, supporting, and call-to-action styles.
Landing Page
Hero Heading
56 / 700
Hero Description
18 / 400
Section Heading
32 / 600
Body
16 / 400
CTA
16 / 600
Supporting Text
14 / 400
Font size controls the scale of text characters and determines how large or small text appears in a design.
Font weight controls the visual thickness or density of characters in a font.
Font size changes the scale of text, while font weight changes the thickness of the characters.
Select a text layer, open the Typography section, locate the Font Size field, enter the required value, and review the result on the canvas.
Select the text layer, choose the font family, and select an available font weight or style from the Typography controls.
16 is a common starting point for digital interface body text, although the appropriate size depends on the font, platform, product, and design system.
Regular is commonly represented as 400 in systems that use numeric font-weight values.
Bold is commonly represented as 700 in systems that use numeric font-weight values.
A typography scale creates consistency and predictable hierarchy between headings, body text, labels, captions, and other content.
It can. Responsive typography may use smaller sizes on mobile when necessary, but the final values should be tested for readability and hierarchy.
Using bold everywhere reduces contrast between important and normal content, making the hierarchy less effective.
Yes. Figma text styles can include font family, font weight, font size, line height, letter spacing, and other supported typography properties.
Create a complete Font Size and Weight system for a modern e-commerce website in Figma.
Font Size and Font Weight are fundamental typography properties in Figma. Font size controls how large or small text appears, while font weight controls the thickness and emphasis of characters. When these properties are combined with font family, line height, letter spacing, and text width, designers can create clear and effective visual hierarchies.
A professional typography system should use consistent font sizes and weights instead of choosing values randomly for individual screens. Creating reusable text styles, typography scales, and design-system tokens makes designs easier to maintain and keeps typography consistent across websites, mobile applications, dashboards, e-commerce interfaces, and other digital products.
Designers should also test typography using realistic content, different screen sizes, long headings, numbers, multilingual content, and accessibility requirements. The final goal is not simply to make text look attractive but to make information easy to read, scan, understand, and use.
To learn professional Figma design, typography, UI design, design systems, and practical project workflows through structured training, visit JustAcademy Figma Training and use the Register for Figma Course Demo option.
