Line-height snippet

The better solution is the extension WordPress Font Customizer, authored by @nikeo.

If you have any questions, use the support forum for the extension where you’ll get a reply from @nikeo directly.

Here are 2 example lines of css – you can play with the numbers to get what you want and you will have to update the info with your own element (ex: p.small would be ‘x’ in your world)

p.small {line-height:80px;}
p.big {line-height:800%;}

If it ignores you try:

p.big {line-height:800% !important;}

More info:
If the main objective is the line height it would and you are by nature a DIY person it would be easy to add to your css. Here is an article about editing your WordPress styles:
https://en.support.wordpress.com/custom-design/editing-css/
Pre tiny mice, if you have a child theme edit style.css : From your left nav go to Appearance, Editor and find style.css in the list on the right. I would add it to the bottom so it is easy to find and edit in the future. If it is not a child theme it may be wiped out when you update the theme so in that case – don’t do it ??

And a page about the css – it also has a page where you can try out the code:
https://www.w3schools.com/cssref/pr_dim_line-height.asp

I realize that I can change the line-height for classes manually in /public_html/”domain”/wp-content/themes/customizr/inc/css , but then I’d have to change it for each skin and also, its not viable when I want to play around with different sizes to see how it affects a design

No, you shouldn’t be altering the theme’s stylesheets. You should instead simply overwrite them by using the Custom CSS panel. You need only enter it once and it will overwrite the styles in all the skins.

Is there a reason why the default wp text editor and tinymce advanced don’t offer line-height or line-spacing or other useful formatting options

HTML/CSS is a system whereby you enter basic text and your CSS and the browser will do the styling for you. It’s fast and efficient over the internet as it’s all plain text, pared down to a minimum. Word processors offer you the “What You See Is What You Get” environment that you want, but they adapt well to different screen sizes (they can’t even cope well with A4<->Letter size!) and to have all that functionality they weigh a lot and are very inefficient.

The visual editor in WordPress or other visual editors in web-development software are hybrids: trying to give you a small sense of WYSIWYG, without being a full-blown word processor.

But the issue is this: we don’t want people to be doing much styling and stuff inside the editor window, because that way every small piece of text will have its own styles and when you want to change something site-wise, you’ll have a devil of a job unravelling it all. That’s the whole point of CSS. Change it once and it applies everywhere.

The Custom CSS area in Customizr is designed for you to be able to try stuff out live: Go to Appearance > Customizr, click on a page with your text in it and then enter CSS rules in the Custom CSS panel. You will be able to play around with the styles live. As long as you don’t press Save and Publish, no one else will see the results. (Remember to cut and paste them somewhere else, if you want to play with them further another time.)

As always, thanks a lot for the swift and detailed responses! What an awesome community ??
@electricfeet : I understand the point of your explanation. What really got me frustrated was that when using TinyMCE advaced, I have an option to change font size. This however, changes the font size without changing the line-height as well, which means that any considerable change in font size is more or less useless. This problem applies to several TinyMCE alternatives that I have tested.
Also, different fonts can look as if they are spaced differently due to their styling. I manage blog posts for a few clients, and the other day for example, I was sitting with a client and he kept asking to see what the text layout would look like “a bit bigger, no wait.. much smaller”. This, in the end, can be argued to be an issue of how to handle a client ?? In the end, for fringe cases like that, I am still not sure that I see any particular reason for a WYSIWYG text editor changing font size without spacing/height change seeing as the code gets messy from the size change already.
Anyways, thanks for the help guys!

@eyeland – there’s a free plugin which will add what you are asking for to the Editor.

While CSS is the way to go if you use a style in several places throughout your site, I find HTML quicker and easier for one-off iterations of a style — except that TinyMCE is a hobbled editor probably intended to get us all to use CSS instead.

On the specific subject of font size vs line height, you should find that the line height adjusts automatically if you use ems or percentages (or a combination of the two) instead of pixels or points to fix a size or relationship.

This rather old A List Apart article is well worth a read – even though some of the research into how different platforms and browsers render text styling may now be out of date.

I’ll also offer a quote from this article:

The line-height property is one of the few CSS properties that don’t need a unit; therefore, line-height: 1.5; is the same thing as 1.5em or 150%. Never use an absolute method to specify Line-Height, such as “px”. If the user changes the font size using their browser settings, or you specify a different font size for the same element later in the CSS, then your lines of text may end up sitting on top of one another.

And for a rather lovely web typography tool, please take a look at FlowType.js.

Thanks Chappie!