Classic leading and CSS line-height traditional styling

Question

Classic leading and CSS line-height traditional styling

The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text.

This significantly differs from the traditional concept of leading, where spacing is typically only added above a line of text. (I understand this oversimplifies the role of line-height, but it helps explain the issue more clearly).

Take a look at this example markup:

<!DOCTYPE html>
<html>
    <head>

    <style type="text/css">
    p
        {
        margin:0;
        font-size: 13pt;
        line-height: 15pt;
        }
    h1
        {
        margin:0;
        font-size: 21pt;
        line-height: 30pt;
        }
    </style>

    </head>
    <body>

    <h1>Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </body>
</html>

If line-height functioned like traditional leading, then the distance between <h1> and the first <p> would match the distance between subsequent <p>s due to the consistent leading. However, this is not the case.

While the distance between <p>s remains constant (

p's line-height - p's font-size = 15 - 13 = 2pt

), the gap between <h1> and the initial <p> varies:

(p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt

.

This visual inconsistency can be easily observed when rendered in a browser.

The challenge arises from the traditional method of maintaining vertical rhythm using multiples of base leading, which CSS does not adhere to, as demonstrated above.

I have three inquiries:

Is my interpretation of line-height, leading, and their distinctions accurate?
Is there a way to uphold vertical rhythm in CSS (whether by emulating traditional leading or using other methods)?
(Extra question) What was the rationale behind deviating line-height so markedly from leading?

UPDATE: Thank you for your feedback! I proposed my own solution and welcome any comments on it:

typography css

Answer 1

Answer №1

Affirmative
Absolutely, achieving proper alignment in CSS may not be straightforward, but by using position:relative;, you can ensure everything lines up correctly. Here's an example:
```
 h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }
```
You can view a demonstration that is still a work in progress here
The individuals who developed CSS did not have expertise in typography. It was likely unintentional.
Bonus information: Catch Jonathan Hoefler discussing the challenges of designing web type and the constraints of CSS in this video presentation.

Answer 2

Affirmative
Absolutely, achieving proper alignment in CSS may not be straightforward, but by using position:relative;, you can ensure everything lines up correctly. Here's an example:
```
 h2 {
   font-size: 36px;
   line-height: 48px;
   position: relative;
   top: 6px;
 }
```
You can view a demonstration that is still a work in progress here
The individuals who developed CSS did not have expertise in typography. It was likely unintentional.
Bonus information: Catch Jonathan Hoefler discussing the challenges of designing web type and the constraints of CSS in this video presentation.

Answer 3

Answer №2

Wow, this method appears to be more effective compared to my previous solution. It still utilizes extra <span> elements inside block-level elements. The key is adjusting the block element's line-height to 1, and playing with the span's line-height, while also balancing it out with top and bottom margins. Remember that this only works when display is set to inline-block.

However, setting margins precisely (to create space between <h1> and <p>) becomes quite intricate and involves some calculations. So, perhaps using a traditional typography approach for leading in CSS is too time-consuming to implement in real development scenarios.

Nevertheless, here is the finalized code:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>

Answer 4

Wow, this method appears to be more effective compared to my previous solution. It still utilizes extra <span> elements inside block-level elements. The key is adjusting the block element's line-height to 1, and playing with the span's line-height, while also balancing it out with top and bottom margins. Remember that this only works when display is set to inline-block.

However, setting margins precisely (to create space between <h1> and <p>) becomes quite intricate and involves some calculations. So, perhaps using a traditional typography approach for leading in CSS is too time-consuming to implement in real development scenarios.

Nevertheless, here is the finalized code:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>

Answer 5

Answer №3

I've come up with a new solution to style headings, but I'm hesitant to mark it as the official answer just yet. My method involves wrapping each element that needs styling in a <span> tag and adjusting the CSS properties of the <span>. By setting the vertical-align to either middle or sub, and the line-height to 0, we can achieve an effect where the spacing between elements is minimized. However, I acknowledge that this approach may not be the most elegant or universal solution, so I welcome feedback on its potential drawbacks.

Here is an example of how this can be implemented:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.style
            {
            vertical-align: sub;
            line-height:0
            }
        p
            {
            margin:0;
            font-size: 26px;
            line-height: 30px;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 60px;
            }
        </style>

    </head>
    <body>

    <h1><span class="style">Title</span></h1>
    <p><span class="style">Lorem Ipsum is simply dummy text...</span></p>
    <p><span class="style">Many desktop publishing packages...</span></p>
    <h1><span class="style">Lorem Ipsum is simply</span></h1>
    </body>
</html>

Answer 6

I've come up with a new solution to style headings, but I'm hesitant to mark it as the official answer just yet. My method involves wrapping each element that needs styling in a <span> tag and adjusting the CSS properties of the <span>. By setting the vertical-align to either middle or sub, and the line-height to 0, we can achieve an effect where the spacing between elements is minimized. However, I acknowledge that this approach may not be the most elegant or universal solution, so I welcome feedback on its potential drawbacks.

Here is an example of how this can be implemented:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.style
            {
            vertical-align: sub;
            line-height:0
            }
        p
            {
            margin:0;
            font-size: 26px;
            line-height: 30px;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 60px;
            }
        </style>

    </head>
    <body>

    <h1><span class="style">Title</span></h1>
    <p><span class="style">Lorem Ipsum is simply dummy text...</span></p>
    <p><span class="style">Many desktop publishing packages...</span></p>
    <h1><span class="style">Lorem Ipsum is simply</span></h1>
    </body>
</html>

Answer 7

Answer №4

Although this discussion is dated, I encountered a similar issue as well. To achieve the typography style seen in word processing software like Microsoft Word, there's a specific adjustment related to line-height 1.

Instead of using line-height:1;, try replacing it with line-height:normal;. The rest of the line height settings should stay unchanged (e.g., 1.5 remains as 1.5).

Answer 8

Although this discussion is dated, I encountered a similar issue as well. To achieve the typography style seen in word processing software like Microsoft Word, there's a specific adjustment related to line-height 1.

Instead of using line-height:1;, try replacing it with line-height:normal;. The rest of the line height settings should stay unchanged (e.g., 1.5 remains as 1.5).

Classic leading and CSS line-height traditional styling

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The combination of two tags can create a powerful and impactful presence

The element residing within the body exceeds the body's dimensions

Jekyll adjusting the starting line of code snippet formatting

Use multiple lines to create a stunning visualization using morris.js. Let your data

Making a dropdown menu spin using Jquery and Javascript

What are the steps to create a CSS 'shell' design?

Unable to resize the div to fit the content

List with pulldown options

Is it possible to create this design using CSS?

What is the reason for the image not being positioned in the top left corner of the html page?

Changing the background color of the legend text when hovering over a d3 doughnut chart

Creating a Modal Dialog with Justified Tab and Dropdown Using Bootstrap 4.1

The collapse feature of Bootstrap 5 navbar is experiencing delays

What could be causing my CSS formatting from a linked style sheet to not be applied properly?

What could be causing the blurriness in the image?

Having trouble with your mobile dropdown menu not responding to clicks?

"Bordering with Rounded Edges: A CSS Styling

What is the best way to stop vertically aligned elements from overlapping the navbar in Bootstrap 4?

Is there a way to ensure that the content within a transparent div is completely visible?

Challenges with creating a contact form using bootstrap modal