search

jaredhowland / rhythm

Sass files to create a vertical rhythm based on modular scales
http://jaredhowland.github.io/rhythm
MIT License
4 stars 0 forks source link

A few starter questions #3

Closed fluxxus closed 8 years ago

fluxxus commented 8 years ago

I plan to use your library for my next project, just want to ask some quick questions.

  1. I don't use Meyer's reset, I go with normalize or sanitize for base resets. The only thing I need to do if using Normalize for example is reset all margins on headings and paragraphas, etc?
  2. Any advice on how to setup the default headings and paragraphs, margins, line-height? Are there any rules to follow here, or I just go with what looks good to my eye.

I like how some typographic libraries have an option to generate base type styles. For example http://typesettings.io/ has a variable $load-typesetted:= true; that spits out the basic styling for all type related elements.

I would like to do something like that with your library, but since I am still learning about type in general, I would like to know if there are any rules to follow when setting these default styles.

p.s. I've browsed a lot of similar projects, and yours seems to pack everything that is needed for nice web typography.

I think it deserves a lot more love, why not promote it on designer-news, codevisually, or something similar? Just my two cents :)

jaredhowland commented 8 years ago

Thanks so much for contacting me about this project. It's great to hear that it has been useful to someone else (or at least has the potential). I will try to address all of your questions:

  1. Meyer's styles reset everything in every browser. Normalize, for example, keeps some defaults—particularly ones dealing with typography: "Resets impose a homogenous visual style by flattening the default styles for almost all elements. In contrast, normalize.css retains many useful default browser styles. This means that you don’t have to redeclare styles for all the common typographic elements." Meyer's reset ensures we cover all of the typographic edge cases to help maintain the vertical rhythm. For most purposes, Normalize is probably fine but I am too much of a control freak to leave it to chance.
  2. Rhythm comes with default styles for headings and paragraphs. You should be able to make something useful out of it straight out of the box. Redefining the default Rhythm variables with your own will allow you to change any of the defaults you disagree with (colors, modular scale, breakpoints, etc). Any other options are probably covered in the documentation.

I am not familiar enough with typesettings.io to say much about $load-typesetted=true. Can you explain what that does in a little more detail?

The default settings will set the default styles you need to get started. Changing the defaults to your own liking will then generate default styles for you to use.

Let me know if you have any more questions or if I didn't fully answer your original questions.

fluxxus commented 8 years ago

@jaredhowland Thanks for taking the time to answer my questions. I may go with nuke-it-all route with Meyer reset, don't want to leave anything to chance either.

Finally had the time to use your library and play with it a bit. As you said, the default styles are there and it looks good out of the box.

Basically your library does pretty much the same as the mentioned Typesettings, providing default styles for headings, paragraphs, lists, blockquotes, etc.

Edit: After a few days of playing with your library, I can say that from now on I will use it on every project for dealing with responsive typography. It is that good :)

Just a few more questions, if you don't mind.

  1. Should I provide different line-heights for each breakpoint or leave it to modular-scale? Pros and cons of each option?
  2. Could you explain the different font sizes used for each map breakpoint, e.g. font-size: 16px 18px, font-size: 18px 20px. What is the reasoning behind the progression?
jaredhowland commented 8 years ago

I'm glad it has proven helpful. Here are my thoughts on your questions:

  1. It is totally a personal preference thing. At smaller font sizes, the modular scale line-height can sometimes be too much. There are no particular pros or cons to either option. I would do what looks best and what meets the needs of the project.
  2. Having more than one font just adds more variety, and a finer gradation between various font sizes in your scale. Take a look at Modularscale.com to see how adding more than one font size provides more options. As far at the reasoning behind the progression of the defaults, there is none. I think they were just pulled from the air based on what looked decent and provided sufficient variety. It depends on what your project needs. If you need both really large and really small font sizes, you can pick two fonts that are far apart from one another to give you some really small and some really big font sizes. If you are looking for more subtle font size changes, pick sizes that are close together. It simply provides you more options as you begin to build your site.
fluxxus commented 8 years ago

Thanks for the explanation.

Regarding double font sizes, I didn't know they were used to create double stranded modular scale, it is clearer now.