Text leading in Yabdab Filter stack

Is it possible to increase the leading in a standard Text stack placed in Yabdab’s Filter stack? I think what I need is a piece of custom CSS but I don’t know how I’d identify the part relevant to Filter stack. I used to use CSSEdit for this with some success. Or is there another text stack that enables control over leading and kerning? Filter stack seems to override the leading text style setting of Elixir’s Ruby theme - hence the question. Thanks!

“Leading” I believe is the print equivalent to CSS line-height Property? If so it should be easy enough to be applied with some custom CSS.

“Kerning” I think is the print terminology for CSS letter-spacing Property? Again, should be able to change with some custom CSS.

Without a URL to a test page and exactly what you want changed, it’s difficult to give you some suggestions for the actual CSS and stacks to try.

1 Like

Hi Doug, thanks very much for your help. Yes, it’s the line height I’m trying to tweak. The url of the page I’m trying replicate the text line height is: https://www.greenercamping.org/certificated-campsites. It’s the campsite description text.

The page I’m now working on uses Yabdab’s Filter stack and as you can see, the campsite description text line height is much reduced: https://www.greenercamping.org/filtered-copy.

I’m also trying to reduce the padding between the sub-title of each site (the location) and the top of the image. There’s no padding on either element, so again I’m at a loss at how to reduce the white space.

Give this a try:

.filter-content > div {
line-height: 1.6;
}
1 Like

That appears to be paragraph bottom margin. Right now, it’s set to 1.25em for all paragraphs. you can override that with something like

p {
   margin-bottom: 1rem;
}

That will effect all paragraphs on the page.

2 Likes

Hi Doug, Thank you so much for this and for the line height problem - both working perfectly now.

1 Like

Speaking as someone who has been in the world of print publications for nearly 50 years, leading is not the same as line height (but try telling Adobe that!). Leading, back in the days of hand setting (and also hot-metal setting) was just that, a thin strip of lead placed between lines of type. If you had 10 pt type with 1pt of leading between the lines, this was called 10pt, 1pt leaded (equivalent to 11pt line height). You could also cast your type on a large body. If you cast 10pt type on an 11pt body, this was called 10/11pt (‘ten on 11pt’). In the early days of photosetting, the equivalent setting was called 10pt with an 11pt line feed. Unfortunately, Adobe came along and started referring to it as 10pt, 11pt leaded, which is quite, quite wrong. I pointed this out to Adobe many years ago but they still persist in this fundamental error!

1 Like

Thanks for that history lesson. I’m old enough to remember (and to have used a lot of) Letraset! And to recall arriving in the studio in the morning to find a continuous roll fax machine with 50 feet of typesetting proofs on the the floor… Happy days (but RW is almost as much fun).

1 Like

Letraset was brilliant stuff, but quite fiddly to align, especially in small sizes. People who weren’t around before PostScript fonts (or founts as we used to spell it in the UK in those days) and DTP have no idea how much easier things are these days. I’m afraid that RW will never be as much fun from the point of view that typographic control in html and css is never going to be as good as in print – that is the price one has to pay for responsive layouts.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.