feat: Basic typography styles

[marcysutton]

To encourage design consistency and help developers following the Material Design spec, Angular Material should provide typographic defaults and classes establishing common sizes, font-weights, type treatments, etc. It should play nicely with theming and RTL support, if possible.

In the spec:
https://www.google.com/design/spec/style/typography.html#typography-standard-styles

[epelc]

@marcysutton Do you know if the fonts are system specific?

They always seem thinner when I get home and switch to my mac.

[marcysutton]

@epelc Roboto is loaded through @font-face and Google fonts. There certainly could be some rendering differences cross-browser, depending on CSS font-smoothing properties used. We'll take a look at that when the work is started on this issue.

[epelc]

Ok as a note it seems different when switching between chrome on windows and chrome on a mac.

[marcysutton]

We'll look at it and do our best to unify the font rendering, but within reason....it is next to impossible to make sites look identical cross-browser and cross-platform.

[epelc]

@marcysutton Thanks and I didn't mean to push for this I just wanted to mention it so you could be aware of it. As some people only use one platform I tend to switch between them daily.

[epelc]

@marcysutton I found a cool way to handle typography

Start at about 11:30 into it. Essentially they abstract everything to the different types of text you would need and then you just include a mixing to get the correct styles.
http://youtu.be/ciG-A_1FyVg

[robertmain]

The reason that the fonts change between browsers and look thinner on certain systems is related to the order in which the font files are loaded. I've run across this before, and that was the fix.

[marcysutton]

From @rschmukler: "Just a heads up our paddings/margins are currently done with px off of base units... They will probably need to be converted with em"

[mikol]

Please take a look at this CSS for English and English-Like Typography Gist. From what I have been able to glean from the Material Design spec and the Android developer guidelines, it’s not clear to me how widget dimensions, padding, etc are supposed to respond. In my experience, em units are a pretty straight line to madness. If rem units are out of the question, maybe consider using a SASS mix-in to set font size and calculate length in em based on pixel units in the .scss declarations (I know how to do this in Less.js but have not tried yet with SASS).

[mikol]

See this Gist about using SASS to calculate lengths in em from lengths specified in px.

[Splaktar]

line-height is also an important part of the Material Design spec around typography.

[mikol]

@Splaktar Yes. So are color, letter-spacing, and text-overflow, which are covered in my first gist above.

[marcysutton]

Thanks for the resources, all. rem units should be fine, since we don't support IE8. See this matrix: http://caniuse.com/#feat=rem

I'm working on creating reusable classes in the framework while setting useful defaults and limiting global styles. Stay tuned for a PR.