Highlighted

why does a 16px font fit inside one row of my 8px grid?

New Here ,
May 25, 2019

Copy link to clipboard

Copied

Shouldn't the x-height of my font fit inside of two of the 8px squares vertically? when I draw out a rectangle to have a height and width of 8px it fits perfectly. I'm trying to encompass the 8pt grid system in my design.

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

The pixel or point size of a font historically stands for the height of the wooden or metal-cast block, enclosing the height of all possible characters of that font. So the x-height is just loosely related to the font size, because it's up to the designer of the font how relatively larger or smaller the font will appear. Some fonts take up a lot of space with their x-height, some are designed to appear smaller.

So it's just a coincidence that the x-height in the font you picked has exactly half of the font's size.

Below, you can see how the x-height varies in three fonts (Helvetica, Times, Futura) within the exact same 72 pt size:

Schermafbeelding 2019-05-27 om 15.10.37.png

An example of a typeset block of text:

Metal_movable_type.jpg

Views

582

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

why does a 16px font fit inside one row of my 8px grid?

New Here ,
May 25, 2019

Copy link to clipboard

Copied

Shouldn't the x-height of my font fit inside of two of the 8px squares vertically? when I draw out a rectangle to have a height and width of 8px it fits perfectly. I'm trying to encompass the 8pt grid system in my design.

Adobe Community Professional
Correct answer by Peter_Villevoye | Adobe Community Professional

The pixel or point size of a font historically stands for the height of the wooden or metal-cast block, enclosing the height of all possible characters of that font. So the x-height is just loosely related to the font size, because it's up to the designer of the font how relatively larger or smaller the font will appear. Some fonts take up a lot of space with their x-height, some are designed to appear smaller.

So it's just a coincidence that the x-height in the font you picked has exactly half of the font's size.

Below, you can see how the x-height varies in three fonts (Helvetica, Times, Futura) within the exact same 72 pt size:

Schermafbeelding 2019-05-27 om 15.10.37.png

An example of a typeset block of text:

Metal_movable_type.jpg

Views

583

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
Adobe Community Professional ,
May 26, 2019

Copy link to clipboard

Copied

That's a damn good question. Please show us some screenshots as well.

Working on MacOS or Windows?

(In General: Fonts have «blind/blank» space around letters – not pixel perfect.)

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...
New Here ,
May 26, 2019

Copy link to clipboard

Copied

Here is an example with a few different fonts. Again I'm using an 8px grid and a 16px font. You did bring up another question I had though which is how to get rid of that invisible padding surrounding text that effects lining up elements precisely. Also I'm using windows 10

example.jpg

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...
Adobe Community Professional ,
May 26, 2019

Copy link to clipboard

Copied

What is the font face that you are using? Have you tried other fonts?

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...
Adobe Community Professional ,
May 26, 2019

Copy link to clipboard

Copied

Please take into account the following

Approximate Conversion from Points to Pixels

(and Ems and %)

Here's a chart that converts points to pixels (and ems and %). It's an approximation, which will depend on font, browser and OS, but it's a good starting point.

PointsPixelsEmsPercent
6pt8px0.5em50%
7pt9px0.55em55%
7.5pt10px0.625em62.5%
8pt11px0.7em70%
9pt12px0.75em75%
10pt13px0.8em80%
10.5pt14px0.875em87.5%
11pt15px0.95em95%
12pt16px1em100%
13pt17px1.05em105%
13.5pt18px1.125em112.5%
14pt19px1.2em120%
14.5pt20px1.25em125%
15pt21px1.3em130%
16pt22px1.4em140%
17pt23px1.45em145%
18pt24px1.5em150%
20pt26px1.6em160%
22pt29px1.8em180%
24pt32px2em200%
26pt35px2.2em220%
27pt36px2.25em225%
28pt37px2.3em230%
29pt38px2.35em235%
30pt40px2.45em245%
32pt42px2.55em255%
34pt45px2.75em275%
36pt48px3em300%

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...
New Here ,
May 26, 2019

Copy link to clipboard

Copied

Yes but if I make a square that is 8px width and height it fits perfectly. So I believe the grid measurement is in pixels?

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...
Adobe Community Professional ,
May 27, 2019

Copy link to clipboard

Copied

The pixel or point size of a font historically stands for the height of the wooden or metal-cast block, enclosing the height of all possible characters of that font. So the x-height is just loosely related to the font size, because it's up to the designer of the font how relatively larger or smaller the font will appear. Some fonts take up a lot of space with their x-height, some are designed to appear smaller.

So it's just a coincidence that the x-height in the font you picked has exactly half of the font's size.

Below, you can see how the x-height varies in three fonts (Helvetica, Times, Futura) within the exact same 72 pt size:

Schermafbeelding 2019-05-27 om 15.10.37.png

An example of a typeset block of text:

Metal_movable_type.jpg

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...
Adobe Community Professional ,
May 27, 2019

Copy link to clipboard

Copied

Exactly - there will be variations is x-height across all font face - even within some font families.

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...
New Here ,
May 27, 2019

Copy link to clipboard

Copied

So how do people use something like googles material design? How do the fonts line up perfectly? Even though the baseline is lined up properly the top lines up perfectly as well to keep a vertical rhythm with spacing.

material design.png

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...