Universal typography

[steida]

So I finally find a time to rethink universal typography (React + React Native) approach. I am afraid current design is not sufficient. What we need:

1) Simple theme definition with implicit dependencies likes rhythm with inline styles in mind. 2) Define only styles, not all HTML elements since they don't exist in React Native and are often superfluous. React soon will use Text and View for span and div. https://github.com/facebook/react/issues/7382 3) We need to define the common universal set of element styles: Text, Paragraph, Heading, Subheading, List, OrderedList... It can mimics HTML of course, but we have a chance to simplify it and make it more explicit.

In the other words, what we need is a computable expression with typography idiomatic DSL (domain specific language). It must be obvious what it does and it must follow React Native styling, which is basically a subset of CSS.

Then we can integrate universal typography into https://github.com/este/este

What do you think?

[KyleAMathews]

Sounds awesome! So basically https://github.com/KyleAMathews/typography.js/blob/master/packages/typography/src/utils/createStyles.js would be restricted to subset of elements that commonly exist in both React/React Native. And then the compileStyles.js would compile Paragraph to <p> and so on?

I think to simplify extending Typography.js for the web that we'd need to expose both the intermediate representation (Text/Paragraphy/Heading/etc.) plus that compiled to the current form.

[steida]

Yes, we should start with the minimal subset, for example, only headings, paragraph, lists, image, form fields, etc. I would say people will like to add own custom UI elements abstractions.

And then the compileStyles.js would compile Paragraph to

and so on?

I suppose compileStyles should compile current values and nothing more. Mapping to elements is another responsibility, probably for some factory. It must be decoupled.

[steida]

In the other words, we need computable typography DSL with common vocabulary. That's clean and only one responsibility.

[KyleAMathews]

Cool. There's already a plugin system which will make it easy for people to create extensions for custom/uncommon UI elements.

[steida]

Just fyi, that's what I am using now https://github.com/este/este/blob/master/src/common/app/theme.js

[steida]

I am pretty sure that what all apps needs for the start is just sane typography. Colors, borders, and all that stuff, to know what I mean, read this https://en.wikipedia.org/wiki/Ornament_and_Crime

[steida]

Btw, can you please write some short blog post about typography, vertical rhythm, etc., just extract and sum up core typography.js knowledge?

[KyleAMathews]

I have a longer blog post in mind that I'm going to work on soon but I assume you're just looking for something more documentation style?

[steida]

Just explain the idea. 3min reading. Short is better than perfect :-)

[KyleAMathews]

There's a "why typography.js" doc I started writing a few weeks ago and stopped as I didn't quite know where I was going :-) https://github.com/KyleAMathews/typography.js/blob/master/docs/why.md

Writing another doc that covers more what I think you want.

[KyleAMathews]

Here's a start to a new doc. Let me know what needs clarified or what else you'd like covered. https://github.com/KyleAMathews/typography.js/blob/master/docs/what.md

[KyleAMathews]

You can also read it with more choices of typography ;-) http://kyleamathews.github.io/typography.js/what/

Or try out ideas live as you learn them.

[steida]

I read it, thank you. Btw, have you seen this http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ and https://github.com/jxnblk/rebass?

[KyleAMathews]

I have — they're super cool. I love component-specific styles. I'm a big fan of components encapsulating everything inside them. But you still need some sort of global base styles — the water the component fish swim in. So how I use Typography.js is that it a) establishes the global style and b) components inherit from it to create their styles (using the rhythm function mainly). This way as long as the component is Typography-aware, you can drop a component in different sites/apps and they'll look perfect.

[steida]

Global base styles, I see, but in Este I would rather call it the theme.js :-)

[steida]

Yeah, I see the purpose of your usage. I am just curious whether we can marry Typography.js with rebass somehow.

[KyleAMathews]

I normally call what Typography.js outputs a "theme" too :-) I like to play with different ways of explaining it though to try them on for size.

Typography.js works well with any sort of inline styles / css-in-js system. Looks like you could use it for setting the global styles in Rebass https://github.com/jxnblk/rebass#configuration

[steida]

Btw, I am surprised he suggests to set lineHeight in the body. Does it mean, that all HTML elements inherits it and it should be the same across whole app?

[steida]

Also, check https://github.com/jxnblk/reflexbox It uses p m with six predefined values from https://github.com/jxnblk/robox, what do you think? Isn't should be set via Typography.js as well?

[steida]

As from the article "Another example would be creating a scale for margin and padding to help keep visual rhythm consistent." is this the correct solution? Does typography do more?

[KyleAMathews]

Isn't should be set via Typography.js as well?

yes :-) https://twitter.com/kylemathews/status/764905817116028928

[KyleAMathews]

Typography.js goes to great lengths to create a vertical rhythm by default. And you can use the rhythm function to assign custom paddings/margins/borders to rhythm units as well. For example, something I do quite often for borders is:

<div
  style={{
    borderTop: '1px solid gray',
    paddingTop: `calc(${rhythm(1/2)} - 1px)`,
  }}
>

[KyleAMathews]

The tiny class thing would be perfect for a Typography plugin. It would auto-add classes for padding/rhythm/etc.

[steida]

Indeed, because calc(${rhythm(1/2) in presentation code is the smell, I think.

[steida]

@KyleAMathews So After months I am back at the issue. Este is ready for some typography magic.

[steida]

What I am doing wrong?

[steida]

I am confused. Did I understand what vertical rhythm is, or those templates have no rhythm?

[KyleAMathews]

@steida it actually looks correct to me. You have to take into account line-height + margins. If you open up the dev tools and inspect around, they'll probably be lining up. Also Typography.js only aspires to conform to 1/2 vertical rhythms. But even just looking at the paragraph text, the typography there is spot on.

[steida]

I used the baseliner Chrome extension for almost all themes. Scroll down and you will see a lot of inconsistencies. Next paragraphs, heading, everything is out of the rhythm.

[KyleAMathews]

Code blocks are treated as "images" and have fixed line-height, etc. so like images, they confuse simple tools like baseliner.

Also I'd note that "vertical rhythm" is not an ironclad rule for typography design :-) Typography.js hits it by default but there'll almost always be something in real designs which messes it up at times.

The goal of typography.js isn't vertical rhythm per se but to give you high-level control over your typography.

[steida]

OK. Thank you.