LESS font size to line-height and rem mixen

Over the Christmas “break” I decided to challenge myself by building a WordPress theme with the most minimal requirements that WordPress requires.

I also wanted to sharpen my LESS skills and try a few new things…  I wanted to figure out how to take any px based font size value and turn it into a rem based value and apply a a good line-height for that element.

The mixen solution

.font-size(@size){
    @rem-value: (@size / 10);
    @px-value: @size;
    @lineHeight: (@size * 1.48);
    line-height: @lineHeight;
    font-size: ~"@{px-value}px";
    font-size: ~"@{rem-value}rem";
}

The input

use the .font-size(x); mixen where x = the px based font size you want to use

h2 {
    .font-size(32);
}

p {
    // you can also keep the "px" as a reminder
    .font-size(16px);
}

Output

h2 {
    line-height: 47.36;
    font-size: 32px;
    font-size: 3.2rem;
}

p {
    line-height: 23.68px;
    font-size: 16px;
    font-size: 1.6rem;
}

What’s happening here?

I’m taking in a px based value. dividing it by 10 to create a rem value, then multiplying the original size value by 1.48 to create a line-height. You can easily adjust the value that the line-height is multiplied by to adjust to your preference or need.

Extensible

I tried to keep it simple for what i’m using it for, but like any LESS mixen you could easily add values for per use line-height input or even margin/padding settings.

Suggestions?

like everything… I’m not saying this is the “best” solution or will work for every kind of project. Let me know if you have any thoughts or better ways of doing this simple smile LESS font size to line height and rem mixen

Tags: ,

4 Responses

  1. If I wanted to learn how to design and code wordpress, do you have a recommendation?

    Thanks.

  2. Taylor says:

    Correct me if I’m mistaken, but wouldn’t using a unit-less line-height of 1.48 work instead of doing the less calculation?

Leave a Reply