Highlighted

Paragraph spacing measurment

Advocate ,
Jul 18, 2018

Copy link to clipboard

Copied

What measurement system does the new paragraph spacing use? Cause it's not pixels. I'm not familiar with the term paragraph spacing from CSS, but I haven't been following markup for many years. In Design Specs the paragraph spacing section is defined with a number even if I haven't set any other than default, and I see that the default spacing value is equal to font size. So a 16px font size is 16 (whatever) in paragraph spacing. When I do a Shift+Enter and/or Enter to receive short and long line breaks, it doesn't affect the paragraph spacing at all, but shouldn't the paragraph spacing tag along to any changes made to the paragraph with the keyboard? When I alter the default paragraph spacing values after doing a Shift+Enter or just Shift it changes the height, this makes me wonder how this thing works.

Views

800

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Paragraph spacing measurment

Advocate ,
Jul 18, 2018

Copy link to clipboard

Copied

What measurement system does the new paragraph spacing use? Cause it's not pixels. I'm not familiar with the term paragraph spacing from CSS, but I haven't been following markup for many years. In Design Specs the paragraph spacing section is defined with a number even if I haven't set any other than default, and I see that the default spacing value is equal to font size. So a 16px font size is 16 (whatever) in paragraph spacing. When I do a Shift+Enter and/or Enter to receive short and long line breaks, it doesn't affect the paragraph spacing at all, but shouldn't the paragraph spacing tag along to any changes made to the paragraph with the keyboard? When I alter the default paragraph spacing values after doing a Shift+Enter or just Shift it changes the height, this makes me wonder how this thing works.

Views

801

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 18, 2018 0
Adobe Employee ,
Jul 18, 2018

Copy link to clipboard

Copied

I checked with the team, and they tell me that the units are in points. the same as for all the other measures in Adobe XD.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
Advocate ,
Jul 18, 2018

Copy link to clipboard

Copied

I really don't get this. We are not measuring anything inside XD in points but in pixels. The layout is px, the typesize is px, the objects are quoted in px. Inside XD it's all about pixel measurements but in Design Specs you can switch measurement systems without that actually changing the values at all? So how does this actually work? In mobile screens you have pixel density concepts but still we work with px measurements in the layout. Would be impossible to have it any other way. You can't say I want this web menu to be this or that in a pixel density measuring system. If I position an object with a 20px margin to the closest object, Design Spec is showing 20px. If you switch to another measurement the increment stays unchanged. So all references are px. So when you are writing the same as for all the other measures in Adobe XD I don't get you cause it's not.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
Community Beginner ,
Dec 20, 2019

Copy link to clipboard

Copied

How come this questions hasn't been followed up on for over a year? See above ^^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2019 0
Adobe Community Professional ,
Dec 20, 2019

Copy link to clipboard

Copied

Fortunately, Adobe and Apple decided a few decades ago that the resolution of display screens would follow suit with the measuring units of typography – hence the golden standard of 72 dpi, in which points equal pixels. So on an old 72 dpi monitor, 1 inch counted exactly 72 pixels. The line height of 72 pt text would measure 1 inch (6 picas) as well.

And it still does, even though modern displays aren't 72 dpi at all anymore.

But design applications still stick to that points equals pixels phenomena.

 

inch 72 dpi.JPG

 

Now there's a whole debate about whose density standard to use (Microsoft's or Android's) and which scaling method to implement for text sizes. But as a designer, we can leave it up to the front-enders to settle on a standard and tweak everything to whatever is necessary to get it right in any framework. And apart from that, there are still the system and the user who can set some size and zoom default for a browser, and overrule whatever the designer and developer came up with. So always leave plenty room for margin, for text to grow.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2019 0
Adobe Community Professional ,
Dec 20, 2019

Copy link to clipboard

Copied

You're right.

A Shift Return historically distinguishes from a normal Return, by applying just a carriage return (with its line height), not ending the paragraph yet (without any extra paragraph spacing). This worked since ancient typesetting, in word-processing software back in the early eighties like MacWrite, MS Word, and WriteNow versions 1, and in the first incarnations of HTML and later on CSS by the use of Paragraph and Break tags.

And in Adobe XD ? Nope. Return and Shift-Return are all the same, ending the paragraph.

 

I wonder if XD will ever dare to implement this difference in text treatment and typographical refinement.

Maybe not, because the rationale might be: let's keep things simple – not production inclined.

 

By the way, since you're coming from an InDesign background, below some extra points of attention:

 

First off, the default paragraph incremental height (Return) in InDesign will initially and automatically be just as large as the line height, which is the font size plus 20%. (This Auto percentage is oddly hidden under the Hyphenation setting for a paragraph.) So a 20 pt/px text size will get a 24 pt/px line height, and zero paragraph spacing before and after. So the line height and paragraph spacing will not be equal to the font size. When you start a text line or frame in Adobe XD, the line height will initially behave in the same manner: font size + 20% (though rounded the next integral). Once edited, you can set the line height back to any automatic value by typing in a percentage.

 

Secondly: in bare bones HTML and CSS, any paragraph always gets some spacing (depending on the browser's default), even when none is set ! So that's why many front-end developers use a so-called "boiler-plate" CSS to set several typography defaults to zero, so any value they state after that will become the prominent one.

 

Next up: in software like InDesign, paragraph spacing is measured in space before and after. Although similar settings are available in CSS, Adobe XD only offers space after. Maybe because that's all they could think of, maybe because they're afraid to open a can of worms with space before and after. There's this difference you know between old-school print media and modern times web typography. In CSS a combination of after and before spacing will collapse to the largest value. In print media (and in InDesign as well), a combination will be the total of space after and before.

 

And Finally: don't forget, in InDesign, the Enter key (on the numerical pad, or fn-Return on a standard keyboard) will jump to the next column. And there's obviously no need for anything similar in Adobe XD...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 20, 2019 0