Add typography #22

kelliedesigner · 2018-02-09T17:06:30Z

Typography is made up of three pillars:

typographic system
suggested sizes and styles
proportional scaling

Explain these three pillars in the most concise way possible with examples, whilst conforming to the GDS guidelines on content style.

The suggested styles use Proxima Nova Light and Semi-Bold in conjuction with system-ui fonts to:

Adhere to the new Barnardo's digital look and feel
Optimise performance by minimising page weight

Apply all these to the website itself.

Closes #3 #15
Ref #1

joelcarr · 2018-02-12T13:45:53Z

src/components/HeadingOne/index.js

+
+import "./index.css";
+
+const HeadingOne = ({ children }) => <h2 className="HeadingOne">{children}</h2>;


Calling the component HeadingOne but using a h2 is confusing to me. What was the reasoning behind this?

I too was confused by this (and HeadingTwo being used on h3).

Our intent is to name typographic elements agnostically to the platform. The design system itself should be applicable to other platforms e.g. a native phone app. As such, these components abstract the web platform implementation details into the component, whereas the name of the component itself is consistent with the design system.

We went with the names Title, HeadingOne, HeadingTwo etc as they common across a few different design systems we looked at (e.g. https://material.io/guidelines/style/typography.html#typography-typeface) and tools like Microsoft Word.

Also Title has a different behavior to the headings, in that its size is bumped up (using a media query) as well as being proportionally scaled.

Finally, Title and Lede are likely to go together, whereas HeadingOne, HeadingTwo will likely go together.

We're using h2 at the moment as a default because it's the hierarchically the 2nd heading in our system. Going forward this component can be extended so that a prop can be used to specify which HTML heading element should be used. Therefore, it'll be the composing component's responsibility to specify the HTML used.

joelcarr · 2018-02-12T14:42:50Z

src/components/UnorderedList/index.js

+import "./index.css";
+
+const UnorderedList = ({ children }) => (
+  <ul className="UnorderedList">{children}</ul>


Can you please explain the decision behind making components like UnorderedList,ListItem, and Paragraph?

Encapsulation of styles.

Styles are scoped to each component. It's pure at the moment, but it might not prove practical. Perhaps a TextBlock component that styles descendant type selectors will end up being the approach taken e.g.

.TextBlock p { font: .. } .TextBlock li { font: .. }

I'd like to see how far the pure approach can be taken, though. As it eliminates side effects in CSS.

tosbourn

I've a few questions (as comments). 👍

tosbourn · 2018-02-12T16:41:38Z

src/components/HeadingOne/index.js

+
+import "./index.css";
+
+const HeadingOne = ({ children }) => <h2 className="HeadingOne">{children}</h2>;


I too was confused by this (and HeadingTwo being used on h3).

tosbourn · 2018-02-12T16:43:14Z

src/components/HeadingOne/index.js

+const HeadingOne = ({ children }) => <h2 className="HeadingOne">{children}</h2>;
+
+HeadingOne.propTypes = {
+  children: PropTypes.node.isRequired


Is children the preferred name for text to go in? I see we use it in multiple components.

If it didn't break convention, I'd prefer "heading", "subHeading", "ledeCopy", or similar.

children is the key provided by ~~Gatsby~~ React which is being destructed out from the first argument here.

children is a special prop in react "to pass children elements directly into their output".

In each of these components, we might be passing in a word wrapped in a<b>,<em> or <a>.

tosbourn · 2018-02-12T16:44:03Z

src/components/HeadingOne/index.css

@@ -0,0 +1,3 @@
+.HeadingOne {
+  font: 600 1.8125rem/2rem Nova, sans-serif;


Should we have a fallback between Nova and a system picked sans-serif?

For the first iteration, I've kept it as simple as possible. Let's create an issue for working out what advantages a middle fallback will add.

tosbourn · 2018-02-12T16:45:47Z

src/index.css

+  font-family: Nova;
+  font-style: normal;
+  font-weight: 300;
+  src: url(./nova-light.woff);


Is it possible to get woff2 variants as well?

For the first iteration, I've kept it as simple as possible (i.e. one-size-fits-all). Let's create an issue for optimising the font delivery.

tosbourn · 2018-02-12T16:46:18Z

src/index.css

+ * Foundation proportional font-sizing system
+ */
+
+/* stylelint-disable selector-max-type, declaration-property-unit-whitelist */


Why are we disabling the stylelint here?

We don't want to turn these rules off globally as using them in this file is an exception to the normal rules. stylelint has disable commands specifically for this reason.

For this specific block of code we're using the % unit for font-size and using type selectors. Elsewhere we use rem for fonts and use class selectors.

Why are we bending the rules for this section of code though? I often find sections of code that get skipped by linters become problematic.

I'll add an explanation for future developers.

tosbourn · 2018-02-12T16:47:30Z

src/layouts/index.js

+import "./index.css";
+
+const Layout = ({ children }) => (
+  <div className="Layout">


Wrapping main inside of a wrapper div seems wasteful, what was the reasoning for this?

Good catch. Originally this layout file also contained Header and Footer components... this wrapper was left over from then. Will remove.

jeddy3 · 2018-02-12T18:08:03Z

@tosbourn @joelcarr Thanks for the feedback. I've changed src/layouts/index.js and responded to the questions. Did you have any questions regarding the content itself i.e. the typographic system and how it scales?

tosbourn · 2018-02-13T10:51:31Z

src/pages/index.js

+    <div className="Index-paragraph">
+      <Paragraph>{`The typographic system is:`}</Paragraph>
+    </div>
+    <div className="Index-unorderedList">


Is there anyway we can remove these wrapper divs in this file? It feels like we're using way too many.

This approach works well for apps as all components are consistently inward looking. It's the responsibility of composing component (in this case, the page) to layout its child components. At the moment the page is mainly a document and so this approach can appear verbose. I think it's worth persevering with, but we can continually assess whether it's appropriate for this site.

tosbourn · 2018-02-13T10:52:24Z

src/pages/index.js

+    </div>
+    <div className="Index-unorderedList">
+      <UnorderedList>
+        <ListItem>{`a consistent baseline of 8sp`}</ListItem>


I'm unsure what the sp value means here?

Let's swap it to px as it turns out sp is specific to android development.

Typography is made up of three pillars: - typographic system - suggested sizes and styles - proportional scaling Explain these three pillars in the most concise way possible with examples, whilst conforming to the GDS guidelines on content style. The suggested styles use Proxima Nova Light and Semi-Bold in conjuction with system-ui fonts to: - Adhere to the new Barnardo's digital look and feel - Optimise performance by minimising page weight Apply all these to the website itself.

joelcarr

👍

sl33p · 2018-02-13T14:56:40Z

👍

It would be great to catch up about the direction of content on the site, I want to make sure it develops to explain not just what to do but also why.

jeddy3 · 2018-02-13T15:07:18Z

I want to make sure it develops to explain not just what to do but also why.

Sounds good. We're currently discussing principles which should give us an overarching why. We can then better determine how much explanation is needed at this lower depth.

kelliedesigner requested review from sl33p and joelcarr February 9, 2018 17:12

joelcarr reviewed Feb 12, 2018

View reviewed changes

tosbourn suggested changes Feb 12, 2018

View reviewed changes

jeddy3 force-pushed the add-typography branch from 03c5e82 to 35a193e Compare February 12, 2018 18:05

tosbourn approved these changes Feb 13, 2018

View reviewed changes

jeddy3 force-pushed the add-typography branch from 35a193e to f152982 Compare February 13, 2018 11:30

joelcarr approved these changes Feb 13, 2018

View reviewed changes

jeddy3 removed the request for review from sl33p February 13, 2018 11:38

jeddy3 merged commit cc1b562 into master Feb 13, 2018

jeddy3 deleted the add-typography branch February 13, 2018 15:47

This was referenced Feb 14, 2018

Experiment with typefaces on the DTW #15

Closed

Account for different viewport sizes #1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add typography #22

Add typography #22

kelliedesigner commented Feb 9, 2018 •

edited

joelcarr Feb 12, 2018

tosbourn Feb 12, 2018

jeddy3 Feb 12, 2018 •

edited

joelcarr Feb 12, 2018

jeddy3 Feb 12, 2018

tosbourn left a comment

tosbourn Feb 12, 2018

tosbourn Feb 12, 2018

joelcarr Feb 12, 2018 •

edited

jeddy3 Feb 12, 2018 •

edited

tosbourn Feb 12, 2018

jeddy3 Feb 12, 2018

tosbourn Feb 12, 2018

jeddy3 Feb 12, 2018 •

edited

tosbourn Feb 12, 2018

jeddy3 Feb 12, 2018 •

edited

tosbourn Feb 13, 2018 •

edited

jeddy3 Feb 13, 2018

tosbourn Feb 12, 2018

jeddy3 Feb 12, 2018

jeddy3 commented Feb 12, 2018

tosbourn Feb 13, 2018

jeddy3 Feb 13, 2018

tosbourn Feb 13, 2018

jeddy3 Feb 13, 2018

joelcarr left a comment

sl33p commented Feb 13, 2018

jeddy3 commented Feb 13, 2018


		import "./index.css";

		const HeadingOne = ({ children }) => <h2 className="HeadingOne">{children}</h2>;

		@@ -0,0 +1,3 @@
		.HeadingOne {
		font: 600 1.8125rem/2rem Nova, sans-serif;

Add typography #22

Add typography #22

Conversation

kelliedesigner commented Feb 9, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeddy3 Feb 12, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tosbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelcarr Feb 12, 2018 • edited

Choose a reason for hiding this comment

jeddy3 Feb 12, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeddy3 Feb 12, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeddy3 Feb 12, 2018 • edited

Choose a reason for hiding this comment

tosbourn Feb 13, 2018 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeddy3 commented Feb 12, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelcarr left a comment

Choose a reason for hiding this comment

sl33p commented Feb 13, 2018

jeddy3 commented Feb 13, 2018

kelliedesigner commented Feb 9, 2018 •

edited

jeddy3 Feb 12, 2018 •

edited

joelcarr Feb 12, 2018 •

edited

jeddy3 Feb 12, 2018 •

edited

jeddy3 Feb 12, 2018 •

edited

jeddy3 Feb 12, 2018 •

edited

tosbourn Feb 13, 2018 •

edited