David567890 Posted June 22, 2023 Share Posted June 22, 2023 (edited) I'm a typographer. I want to have control over the type and layout of a page. I understand that Squarespace wants to be responsive on many devices, but Squarespace too often makes decisions for us designers. I can change the size of the type of heading 1, 2, 3. But I want to adjust the vertical space after the type. Right now, the default is to put a huge amount of white space under a heading. This doesn't work for me at all. Generally, I'm using headings as headings - they precede some text I want to be associated with that heading. The space is too much. I don't mind something global that affects all headings. For example, a script that says: Make the white space after all headings = x times line height, where x is a number like 0.5 - 3.0. Is there code that would do this? Edited June 22, 2023 by David567890 Link to comment
JasonGipson Posted June 22, 2023 Share Posted June 22, 2023 Squarespace already does this with the line height and font-size. If you want to manually adjust with code you could use a number of methods or you can adjust the line height in the design settings. h1 { line-height: calc(1.32184); } @media screen and (min-width: 768px), screen and (max-width: calc(3179px)) and (orientation: landscape) h1 { font-size: calc(1.67496vw + 1rem); } Link to comment
David567890 Posted June 23, 2023 Author Share Posted June 23, 2023 Sorry, I'm still confused! I have a background in typography, book design, graphic design, typeface design, and web design. In HTML I can get what I want. Here in Squarespace, I can't. I can adjust the font size of any display (heading) or text (paragraph) fonts, and I get larger or smaller type. When I adjust line height, that changes the amount of space ABOVE AND BELOW the type in equal amounts. Typographically, this is bad. The only rational way to set this parameter is for what works best with text, because you don't want text lines to be too far apart or close together vertically. This means there is no way to adjust the vertical spacing after headings independently, and in any event it doesn't even do that, it does both above and below. So I tried the code. It seems "line height" adds the same amount of space above and below the headline, which of course I don't want at the same time. I'd want to control those independently. I have found something that kind of works, though it isn't the full control I'm looking for: h1 { line-height: calc(0.1); } Is there any way to do this for ALL headers, or do I have to name each one and repeat the same code for each? Is there any way to adjust white space above and below independently? Link to comment
David567890 Posted June 24, 2023 Author Share Posted June 24, 2023 In addition, line height screws up if a header (like H1) wraps to the next line. There it completely fails. So I'm again stuck without a solution, because line height affects white space both above and below. My problem is line height. It doesn't let me control type. Is there something else? Link to comment
PeppyRose Posted March 22 Share Posted March 22 I wonder, did you solve this? I am changing the line height on header 3 for a specific purpose but it's also changing my lie heights globally. Is there a way around this without adding code? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment