Skip to content

Commit bc7ba10

Browse files
author
mrmrs
committed
Fix typo in spacing docs
1 parent a7d546a commit bc7ba10

File tree

2 files changed

+16
-2
lines changed

2 files changed

+16
-2
lines changed

docs/layout/spacing/index.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,14 @@ <h3 class="f6 ttu tracked mt0">Spacing</h3>
111111
Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.
112112
</p>
113113
<p class="measure f5 f4-ns lh-copy">
114-
Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in fw4s were designed with ratios. In the 21st century, we have gotten away from this on the web, often times using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't reflective of how the web works across device sizes or how things get drawn to the screen.
114+
Good design is based on math. Certain patterns and ratios are so
115+
prevelant in nature and music that they can't be denied as elegant design
116+
solutions. Even in the 18th century, pages in books were designed with ratios.
117+
In the 21st century, we have gotten away from this on the web, often using
118+
magic numbers to match a 'spec' that has been produced in a graphics program
119+
such as photoshop, illustrator, or sketch. While these programs are useful for
120+
sketching ideas, they aren't 100% accurate in their reflection of how the web
121+
works across device sizes or how things get drawn to the screen.
115122
</p>
116123
<p class="measure f5 f4-ns lh-copy">
117124
Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren't that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You'll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.

src/templates/docs/spacing/index.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,14 @@ <h3 class="f6 ttu tracked mt0">Spacing</h3>
6868
Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.
6969
</p>
7070
<p class="measure f5 f4-ns lh-copy">
71-
Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in fw4s were designed with ratios. In the 21st century, we have gotten away from this on the web, often times using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't reflective of how the web works across device sizes or how things get drawn to the screen.
71+
Good design is based on math. Certain patterns and ratios are so
72+
prevelant in nature and music that they can't be denied as elegant design
73+
solutions. Even in the 18th century, pages in books were designed with ratios.
74+
In the 21st century, we have gotten away from this on the web, often using
75+
magic numbers to match a 'spec' that has been produced in a graphics program
76+
such as photoshop, illustrator, or sketch. While these programs are useful for
77+
sketching ideas, they aren't 100% accurate in their reflection of how the web
78+
works across device sizes or how things get drawn to the screen.
7279
</p>
7380
<p class="measure f5 f4-ns lh-copy">
7481
Tachyons features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since tachyons uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time. As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren't that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You'll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.

0 commit comments

Comments
 (0)