Universal typography about typography.js HOT 31 OPEN

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

from typography.js.

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

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

from typography.js.

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.

from typography.js.

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.

from typography.js.

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

from typography.js.

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

from typography.js.

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

from typography.js.

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

from typography.js.

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

from typography.js.

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?

from typography.js.

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

from typography.js.

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.

from typography.js.

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

from typography.js.

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.

from typography.js.

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?

from typography.js.

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.

from typography.js.

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

from typography.js.

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

from typography.js.

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?

from typography.js.

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?

from typography.js.

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?

from typography.js.

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)`,
  }}
>

from typography.js.

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

from typography.js.

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

from typography.js.

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

from typography.js.

What I am doing wrong?

from typography.js.

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

from typography.js.

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

from typography.js.

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.

from typography.js.

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.

from typography.js.

OK. Thank you.

from typography.js.