Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Line Height

Line height, also known as "leading" in typography, represents the vertical spacing between lines of text in a block or element. It plays a fundamental role in controlling text's readability and aesthetics, ensuring content is visually balanced.

Tailwind CSS includes various pre-configured line-height classes while allowing you to define custom line-height values that align with your design's requirements. Let’s explore how to efficiently work with line-height in Tailwind CSS.

ClassPropertiesExample
leading-3line-height: .75rem; <div className="leading-3"></div>
leading-4line-height: 1rem; <div className="leading-4"></div>
leading-5line-height: 1.25rem; <div className="leading-5"></div>
leading-6line-height: 1.5rem; <div className="leading-6"></div>
leading-7line-height: 1.75rem; <div className="leading-7"></div>
leading-8line-height: 2rem; <div className="leading-8"></div>
leading-9line-height: 2.25rem; <div className="leading-9"></div>
leading-10line-height: 2.5rem; <div className="leading-10"></div>
leading-noneline-height: 1;<div className="leading-none"></div>
leading-tightline-height: 1.25;<div className="leading-tight"></div>
leading-snugline-height: 1.375;<div className="leading-snug"></div>
leading-normalline-height: 1.5;<div className="leading-normal"></div>
leading-relaxedline-height: 1.625;<div className="leading-relaxed"></div>
leading-looseline-height: 2;<div className="leading-loose"></div>

Overview of Line Height

Adding Relative Line Height

Relative line heights use unitless values that depend on the font size of the element. These are useful when you aim to maintain a harmonious relationship between text size and spacing.

Tailwind's leading-relaxed class here creates proportional spacing that usually fits better with long-form text.

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-50">  
      <p className="text-lg leading-relaxed text-gray-800 text-center px-10">  
        Tailwind CSS ensures flexible spacing between text lines.  
        Adding a background image improves presentation aesthetics.  
      </p>  
    </div>  
  );  
}  

{/* Tailwind class applied: 
   leading-relaxed -> Line Height ≈ 1.625
*/}

Adding Fixed Line Height

Fixed line heights are predefined values (like 4, 5, 6) that offer consistent spacing irrespective of the preceding font size. Use them when text requires fixed positioning.

For this case, leading-9 sets the line height to a fixed 36px, irrespective of viewport or surrounding contexts.

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">  
      <p className="text-lg leading-9 text-gray-700 text-center px-10">  
        Fixed line heights provide predictable alignment for high-end designs.  
      </p>  
    </div>  
  );  
}  

{/* Tailwind class applied: 
   leading-9 -> Line Height = 36px 
*/}

States and Responsiveness

Responsive and state-specific utilities enhance Tailwind's flexibility. You can control line-heights based on interaction states and breakpoints.

Hover and Focus States

Hover-specific changes, such as modifying line height when a user hovers over an element, enhance user feedback via interactive styling.

The class hover:leading-loose here activates an expanded line height when hovered.

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex items-center justify-center">  
      <p className="text-lg leading-tight hover:leading-loose bg-white text-black p-5 text-center">  
        Hovering dynamically alters spacing between these two lines.  
      </p>  
    </div>  
  );  
}  

{/* Tailwind classes applied: 
   leading-tight -> Line Height effectively shrinks 
   hover:leading-loose -> Expands spacing on hover
*/}

Breakpoint Modifiers

Breakpoints help you adjust line heights based on screen size while enhancing readability for different devices.

The lg:leading-10 here ensures spacing is significantly increased for larger display areas, enhancing readability.

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex justify-center items-center">  
      <p className="leading-6 lg:leading-10 text-lg text-gray-900 text-center px-10">  
        The line-height of this text will change according to the screen.  
      </p>  
    </div>  
  );  
}  

{/* Tailwind classes applied: 
   leading-6 -> Default Line Height (Small screen)
   md:leading-7 -> Medium screens enhanced spacing
   lg:leading-10 -> Optimized for wide-view port       
*/}

Custom Line Height

When working with responsive typography, it's crucial to manage how line heights are applied across different breakpoints. Tailwind's font-size utilities come with their own default line heights, which can override any explicitly set line heights at smaller breakpoints when larger font sizes are applied at higher breakpoints.

For example, consider a paragraph that has a specific line height set for a base font size. When a larger font size is applied at a medium breakpoint, the default line height associated with that larger font size will take precedence, potentially disrupting the intended spacing.

To maintain control over line heights when changing font sizes responsively, always set the line height for each breakpoint where the font size changes. This practice ensures that the spacing between lines remains harmonious with the new font size, preserving the overall typographic balance.

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen px-6 pt-10">  
      <p class="text-base leading-loose md:text-lg">
        Adjusting font size at medium breakpoints may override the base line height.
      </p>
      {/* To maintain consistent line height, specify it at the medium breakpoint as well: */}
      <p class="text-base leading-normal md:text-lg md:leading-loose mt-4">
        Consistent line height across breakpoints ensures readability.
      </p>
    </div>  
  );  
}

Using the same line height across varying font sizes can lead to poor typographic results. Typically, as font sizes increase, the line height should decrease to maintain visual appeal and readability. Tailwind's default behavior generally handles this scaling effectively, reducing the need for manual adjustments. However, if customization is necessary, consider adjusting the font-size scale to exclude default line heights that conflict with your design requirements.

Custom Line Height

Extending the Theme

Alter the Tailwind configuration file (tailwind.config.js) for scalable usage:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex flex-col items-center justify-center gap-6 p-10 text-center">  
      <p className="leading-tighter">This line has leading-tighter utility for the line-height!</p>  
      <p className="leading-looser">This line has leading-looser utility for the line-height.</p>  
    </div>  
  );  
}

Using Arbitrary Values

Applying arbitrary line-height values directly caters to one-off experimental needs. To use an arbitrary line-height, define the value inside square brackets along with the leading utility. Here's an example:

This is a live editor. Play around with it!
import React from 'react';  

export default function App() {  
  return (  
    <div className="w-screen h-screen flex justify-center items-center px-10 text-center">  
      <p className="leading-[50px]">This line has an arbitrary line-height of leading-[50px]</p>
    </div>
  )
}

Real World Examples

Blog Post Grid with Variable Line Heights

This component showcases different line heights for blog post cards with titles, excerpts, and metadata.

This is a live editor. Play around with it!
export default function BlogGrid() {
  const posts = [
    {
      title: "Understanding Modern Web Architecture",
      excerpt: "Deep dive into contemporary web development patterns and best practices...",
      author: "Sarah Chen",
      date: "2024-01-15",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085"
    },
    {
      title: "The Future of AI in Development",
      excerpt: "Exploring how artificial intelligence is reshaping software development...",
      author: "Mike Rodriguez",
      date: "2024-01-14",
      image: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb"
    },
    {
      title: "Mastering CSS Grid Layout",
      excerpt: "A comprehensive guide to building complex layouts with CSS Grid...",
      author: "Emma Watson",
      date: "2024-01-13",
      image: "https://images.unsplash.com/photo-1507238691740-187a5b1d37b8"
    },
    {
      title: "Performance Optimization Techniques",
      excerpt: "Learn how to improve your website's loading speed and performance...",
      author: "David Kim",
      date: "2024-01-12",
      image: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6"
    },
    {
      title: "Responsive Design Principles",
      excerpt: "Essential guidelines for creating mobile-first responsive websites...",
      author: "Lisa Thompson",
      date: "2024-01-11",
      image: "https://images.unsplash.com/photo-1516116216624-53e697fedbea"
    },
    {
      title: "Web Security Best Practices",
      excerpt: "Protecting your web applications from common security threats...",
      author: "James Wilson",
      date: "2024-01-10",
      image: "https://images.unsplash.com/photo-1563986768609-322da13575f3"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {posts.map((post, index) => (
        <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
          <img 
            src={post.image} 
            alt={post.title}
            className="w-full h-48 object-cover"
          />
          <div className="p-6">
            <h2 className="text-xl font-bold leading-tight mb-2">{post.title}</h2>
            <p className="text-gray-600 leading-relaxed mb-4">{post.excerpt}</p>
            <div className="flex items-center text-sm text-gray-500">
              <span className="leading-normal">{post.author}</span>
              <span className="mx-2">•</span>
              <span className="leading-loose">{post.date}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Testimonial Carousel with Dynamic Line Heights

A testimonial component that adjusts line height based on content length and screen size.

This is a live editor. Play around with it!
export default function TestimonialCarousel() {
  const testimonials = [
    {
      quote: "This product completely transformed our workflow efficiency.",
      author: "John Smith",
      position: "CTO, TechCorp",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
    },
    {
      quote: "The best solution we've found for our team's collaboration needs.",
      author: "Patricia Moore",
      position: "Product Manager, InnovateLabs",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      quote: "Incredible customer support and outstanding features.",
      author: "Robert Chen",
      position: "CEO, StartupX",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    {
      quote: "A game-changer for our remote team communication.",
      author: "Sarah Johnson",
      position: "Head of Design, CreativeHub",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
    },
    {
      quote: "Seamless integration and powerful functionality.",
      author: "Michael Brown",
      position: "Lead Developer, CodeCraft",
      avatar: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef"
    },
    {
      quote: "The most intuitive platform we've ever used.",
      author: "Emma Davis",
      position: "Operations Director, GlobalTech",
      avatar: "https://images.unsplash.com/photo-1517841905240-472988babdf9"
    }
  ];

  return (
    <div className="bg-gray-100 py-12">
      <div className="max-w-6xl mx-auto px-4">
        <h2 className="text-3xl font-bold text-center leading-tight mb-12">
          What Our Clients Say
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => (
            <div key={index} className="bg-white rounded-xl p-6 shadow-md">
              <p className="text-gray-600 leading-relaxed mb-6">
                "{testimonial.quote}"
              </p>
              <div className="flex items-center">
                <img
                  src={testimonial.avatar}
                  alt={testimonial.author}
                  className="w-12 h-12 rounded-full"
                />
                <div className="ml-4">
                  <h4 className="font-semibold leading-snug">
                    {testimonial.author}
                  </h4>
                  <p className="text-gray-500 text-sm leading-loose">
                    {testimonial.position}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Feature List with Hierarchical Line Heights

A component displaying product features with different line heights for hierarchy.

This is a live editor. Play around with it!
export default function FeatureList() {
  const features = [
    {
      title: "Advanced Analytics",
      description: "Get deep insights into your business performance with real-time analytics.",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71"
    },
    {
      title: "Secure Platform",
      description: "Enterprise-grade security measures to protect your sensitive information.",
      icon: "https://images.unsplash.com/photo-1563986768494-4dee2763ff3f"
    },
    {
      title: "24/7 Support",
      description: "Round-the-clock customer support to assist you whenever you need help.",
      icon: "https://images.unsplash.com/photo-1534536281715-e28d76689b4d"
    },
    {
      title: "Custom Workflows",
      description: "Create and automate workflows tailored to your specific business needs.",
      icon: "https://images.unsplash.com/photo-1512758017271-d7b84c2113f1"
    },
    {
      title: "Mobile Optimized",
      description: "Fully responsive design ensures seamless operation across all devices.",
      icon: "https://images.unsplash.com/photo-1526406915894-7bcd65f60845"
    }
  ];

  return (
    <div className="bg-white py-16">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-4xl font-bold text-center leading-tight mb-4">
          Powerful Features
        </h2>
        <p className="text-gray-600 text-center leading-relaxed mb-12 max-w-2xl mx-auto">
          Discover why thousands of businesses choose our platform for their needs
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="p-6 border rounded-lg hover:shadow-lg transition-shadow">
              <img
                src={feature.icon}
                alt={feature.title}
                className="w-12 h-12 object-cover rounded mb-4"
              />
              <h3 className="text-xl font-semibold leading-snug mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-600 leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Pricing Table with Varied Line Heights

A pricing component using different line heights for better readability.

This is a live editor. Play around with it!
export default function PricingTable() {
  const plans = [
    {
      name: "Starter",
      price: "29",
      description: "Perfect for small teams and startups",
      features: [
        "Up to 5 team members",
        "Basic analytics",
        "2GB storage",
        "Email support",
        "Basic integrations",
        "Weekly backups"
      ]
    },
    {
      name: "Professional",
      price: "79",
      description: "Ideal for growing businesses",
      features: [
        "Up to 20 team members",
        "Advanced analytics",
        "10GB storage",
        "Priority support",
        "Advanced integrations",
        "Daily backups"
      ]
    },
    {
      name: "Enterprise",
      price: "199",
      description: "For large organizations",
      features: [
        "Unlimited team members",
        "Custom analytics",
        "Unlimited storage",
        "24/7 dedicated support",
        "Custom integrations",
        "Real-time backups"
      ]
    }
  ];

  return (
    <div className="bg-gray-50 py-16">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-4xl font-bold text-center leading-tight mb-4">
          Simple, Transparent Pricing
        </h2>
        <p className="text-gray-600 text-center leading-relaxed mb-12">
          Choose the plan that best fits your needs
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {plans.map((plan, index) => (
            <div key={index} className="bg-white rounded-xl shadow-lg p-8">
              <h3 className="text-2xl font-bold leading-tight mb-2">
                {plan.name}
              </h3>
              <p className="text-gray-600 leading-relaxed mb-4">
                {plan.description}
              </p>
              <div className="mb-8">
                <span className="text-4xl font-bold leading-none">${plan.price}</span>
                <span className="text-gray-500 leading-loose">/month</span>
              </div>
              <ul className="space-y-4 mb-8">
                {plan.features.map((feature, idx) => (
                  <li key={idx} className="flex items-center leading-normal">
                    <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                    </svg>
                    {feature}
                  </li>
                ))}
              </ul>
              <button className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold leading-normal hover:bg-blue-700 transition-colors">
                Get Started
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Team Directory with Responsive Line Heights

A team directory component with responsive line heights for different screen sizes.

This is a live editor. Play around with it!
export default function TeamDirectory() {
  const team = [
    {
      name: "Alexandra Thompson",
      role: "Chief Executive Officer",
      bio: "15+ years of experience in technology leadership and innovation.",
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      name: "Marcus Chen",
      role: "Chief Technology Officer",
      bio: "Former Google engineer with expertise in scalable systems.",
      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
    },
    {
      name: "Sarah Williams",
      role: "Head of Design",
      bio: "Award-winning designer with focus on user experience.",
      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
    },
    {
      name: "James Rodriguez",
      role: "Lead Developer",
      bio: "Full-stack developer specialized in cloud architecture.",
      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    {
      name: "Emily Parker",
      role: "Product Manager",
      bio: "Experienced in leading agile teams and product strategy.",
      image: "https://images.unsplash.com/photo-1517841905240-472988babdf9"
    },
    {
      name: "Michael Foster",
      role: "Marketing Director",
      bio: "Digital marketing expert with focus on growth strategies.",
      image: "https://images.unsplash.com/photo-1519345182560-3f2917c472ef"
    }
  ];

  return (
    <div className="bg-gray-50 py-16">
      <div className="max-w-7xl mx-auto px-4">
        <h2 className="text-4xl font-bold text-center leading-tight mb-4">
          Meet Our Team
        </h2>
        <p className="text-gray-600 text-center leading-relaxed mb-12 max-w-2xl mx-auto">
          The talented people behind our success
        </p>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {team.map((member, index) => (
            <div key={index} className="bg-white rounded-xl overflow-hidden shadow-lg">
              <img
                src={member.image}
                alt={member.name}
                className="w-full h-64 object-cover"
              />
              <div className="p-6">
                <h3 className="text-xl font-bold leading-snug mb-1">
                  {member.name}
                </h3>
                <p className="text-blue-600 font-medium leading-normal mb-3">
                  {member.role}
                </p>
                <p className="text-gray-600 leading-relaxed">
                  {member.bio}
                </p>
                <div className="mt-4 flex space-x-4">
                  <button className="text-blue-600 hover:text-blue-700 leading-normal">
                    LinkedIn
                  </button>
                  <button className="text-blue-600 hover:text-blue-700 leading-normal">
                    Twitter
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Customization Examples

Article Card with Custom Line Heights for Different Text Elements

This example demonstrates how to create an article card with customized line heights for the title, subtitle, and body text to improve readability.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ArticleCard() {
  return (
    <div className="max-w-xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
      <img 
        src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
        alt="Coding setup"
        className="w-full h-48 object-cover"
      />
      <div className="p-6">
        <h2 className="text-3xl font-bold leading-title text-gray-900 mb-2">
          Understanding Modern Web Development
        </h2>
        <p className="text-lg leading-subtitle text-gray-600 mb-4">
          Explore the latest trends and best practices in frontend development
        </p>
        <p className="leading-body text-gray-700">
          In today's rapidly evolving tech landscape, staying updated with modern web
          development practices is crucial. This comprehensive guide walks you through
          essential concepts and tools that every developer should know.
        </p>
      </div>
    </div>
  )
}

Pricing Table with Variable Line Heights

This example shows how to implement a pricing table with different line heights for various content sections.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function PricingCard() {
  return (
    <div className="max-w-sm mx-auto bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8 shadow-xl">
      <h3 className="text-2xl font-extrabold text-purple-800 leading-pricing-header mb-4">
        Professional Plan
      </h3>
      
      <div className="leading-price-text mb-6">
        <span className="text-4xl font-bold text-gray-900">$49</span>
        <span className="text-gray-600">/month</span>
      </div>

      <ul className="leading-feature-list space-y-3 mb-8">
        {['Unlimited Projects', 'Priority Support', 'Custom Domain', 'Analytics Dashboard'].map((feature) => (
          <li key={feature} className="flex items-center">
            <svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
            </svg>
            {feature}
          </li>
        ))}
      </ul>
      
      <button className="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 transition-colors">
        Get Started
      </button>
    </div>
  )
}

Hero Section with Dynamic Line Heights for Responsive Text

This example demonstrates how to create a hero section with responsive line heights that adjust based on screen size.

This is a live editor. Play around with it!
// App.js
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function HeroSection() {
  return (
    <div className="relative min-h-screen bg-gray-900">
      <div 
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage: "url('https://images.unsplash.com/photo-1451187580459-43490279c0fa')",
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      />
      
      <div className="relative max-w-4xl mx-auto px-4 text-center">
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6
          leading-hero-mobile md:leading-hero-desktop">
          Transform Your Digital Presence with Next-Generation Web Solutions
        </h1>
        
        <p className="text-xl text-gray-300 mb-8 leading-hero-subtitle
          max-w-2xl mx-auto">
          Leverage cutting-edge technology to create immersive and responsive
          web experiences that captivate your audience and drive results.
        </p>
        
        <div className="flex flex-col sm:flex-row gap-4 justify-center
          leading-cta-text">
          <button className="px-8 py-4 bg-blue-600 text-white rounded-lg
            hover:bg-blue-700 transition-colors">
            Get Started
          </button>
          <button className="px-8 py-4 bg-transparent border-2 border-white
            text-white rounded-lg hover:bg-white hover:text-gray-900
            transition-colors">
            Learn More
          </button>
        </div>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

Always prioritize maintaining a matching line-height values to your typographic scale. For example, pairing leading-relaxed for body text with leading-tight for titles establishes a clean reading experience.

You can also define consistent custom line-height themes in your Tailwind configuration file. If all your headings follow only two specific line-height values, leverage custom tokens in tailwind.config.js to name these explicitly. Apply these reusable styles across your components. This practice avoids arbitrary spacing, strengthens composability, and ensures design adherence when scaling your app.

Balance with Other Layout Properties

Properly combining line-height utilities with padding and margin classes enhances both usability and aesthetics. If you define a large title in leading-none, spacing utilities like mt-4 or mb-2 can help visually distinguish that title from surrounding sections, maintaining a clean appearance.

Accessibility Considerations

Enhance Readability and Navigability

Using Tailwind CSS line-height classes such as leading-relaxed or leading-loose ensures body text is adequately spaced, reducing eye strain for readers. For long-form content, avoid shorter line heights like leading-tight, as these can hinder readability, particularly for neurodivergent users or those with cognitive disabilities.

Also, test multiple line-height values on your brand fonts as the same line height may not suit all fonts.

Focus on High Contrast

Line height influences visual spacing, which indirectly helps ensure adequate contrast ratios between text and background. Try pairing leading-* utilities with background color utilities that have enough contrast for readable content.

For accessibility, avoid using dense styles like leading-tight over backgrounds directly underlaid with complex imagery or gradients. Instead, combine leading-relaxed with Tailwind's opacity classes (bg-opacity-75) to mask disruptive patterns and create cleaner, high-contrast sections.

Letter SpacingList Style Position

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy