xy.css

Typography

Copy/paste typographic styles

No need to to do the math, just copy/paste into any block-level selector, like <h1>, <div>, or <p>. For example, to style super-huge 44-pixel paragraphs, we copy & paste thusly:

p { font-size: 3.667em; line-height: 0.409; margin-bottom: 0.409em; /* 44px */ }

..and done. The following styles are designed for xy.css, and should work with similar grid systems.

  • font-size: 5.333em; line-height: 0.281; margin-bottom: 0.281em; /* 64px */
  • font-size: 5.250em; line-height: 0.286; margin-bottom: 0.286em; /* 63px */
  • font-size: 5.167em; line-height: 0.290; margin-bottom: 0.290em; /* 62px */
  • font-size: 5.083em; line-height: 0.295; margin-bottom: 0.295em; /* 61px */
  • font-size: 5.000em; line-height: 0.300; margin-bottom: 0.300em; /* 60px */
  • font-size: 4.917em; line-height: 0.305; margin-bottom: 0.305em; /* 59px */
  • font-size: 4.833em; line-height: 0.310; margin-bottom: 0.310em; /* 58px */
  • font-size: 4.750em; line-height: 0.316; margin-bottom: 0.316em; /* 57px */
  • font-size: 4.667em; line-height: 0.321; margin-bottom: 0.321em; /* 56px */
  • font-size: 4.583em; line-height: 0.327; margin-bottom: 0.327em; /* 55px */
  • font-size: 4.500em; line-height: 0.333; margin-bottom: 0.333em; /* 54px */
  • font-size: 4.417em; line-height: 0.340; margin-bottom: 0.340em; /* 53px */
  • font-size: 4.333em; line-height: 0.346; margin-bottom: 0.346em; /* 52px */
  • font-size: 4.250em; line-height: 0.353; margin-bottom: 0.353em; /* 51px */
  • font-size: 4.167em; line-height: 0.360; margin-bottom: 0.360em; /* 50px */
  • font-size: 4.083em; line-height: 0.367; margin-bottom: 0.367em; /* 49px */
  • font-size: 4.000em; line-height: 0.375; margin-bottom: 0.375em; /* 48px */
  • font-size: 3.917em; line-height: 0.383; margin-bottom: 0.383em; /* 47px */
  • font-size: 3.833em; line-height: 0.391; margin-bottom: 0.391em; /* 46px */
  • font-size: 3.750em; line-height: 0.400; margin-bottom: 0.400em; /* 45px */
  • font-size: 3.667em; line-height: 0.409; margin-bottom: 0.409em; /* 44px */
  • font-size: 3.583em; line-height: 0.419; margin-bottom: 0.419em; /* 43px */
  • font-size: 3.500em; line-height: 0.429; margin-bottom: 0.429em; /* 42px */
  • font-size: 3.417em; line-height: 0.439; margin-bottom: 0.439em; /* 41px */
  • font-size: 3.333em; line-height: 0.450; margin-bottom: 0.450em; /* 40px */
  • font-size: 3.250em; line-height: 0.462; margin-bottom: 0.462em; /* 39px */
  • font-size: 3.167em; line-height: 0.474; margin-bottom: 0.474em; /* 38px */
  • font-size: 3.083em; line-height: 0.486; margin-bottom: 0.486em; /* 37px */
  • font-size: 3.000em; line-height: 0.500; margin-bottom: 0.500em; /* 36px */
  • font-size: 2.917em; line-height: 0.514; margin-bottom: 0.514em; /* 35px */
  • font-size: 2.833em; line-height: 0.529; margin-bottom: 0.529em; /* 34px */
  • font-size: 2.750em; line-height: 0.545; margin-bottom: 0.545em; /* 33px */
  • font-size: 2.667em; line-height: 0.563; margin-bottom: 0.563em; /* 32px */
  • font-size: 2.583em; line-height: 0.581; margin-bottom: 0.581em; /* 31px */
  • font-size: 2.500em; line-height: 0.600; margin-bottom: 0.600em; /* 30px */
  • font-size: 2.417em; line-height: 0.621; margin-bottom: 0.621em; /* 29px */
  • font-size: 2.333em; line-height: 0.643; margin-bottom: 0.643em; /* 28px */
  • font-size: 2.250em; line-height: 0.667; margin-bottom: 0.667em; /* 27px */
  • font-size: 2.167em; line-height: 0.692; margin-bottom: 0.692em; /* 26px */
  • font-size: 2.083em; line-height: 0.720; margin-bottom: 0.720em; /* 25px */
  • font-size: 2.000em; line-height: 0.750; margin-bottom: 0.750em; /* 24px */
  • font-size: 1.917em; line-height: 0.783; margin-bottom: 0.783em; /* 23px */
  • font-size: 1.834em; line-height: 0.818; margin-bottom: 0.818em; /* 22px */
  • font-size: 1.750em; line-height: 0.857; margin-bottom: 0.857em; /* 21px */
  • font-size: 1.667em; line-height: 0.900; margin-bottom: 0.900em; /* 20px */
  • font-size: 1.583em; line-height: 0.947; margin-bottom: 0.947em; /* 19px */
  • font-size: 1.500em; line-height: 1.000; margin-bottom: 1.000em; /* 18px */
  • font-size: 1.417em; line-height: 1.059; margin-bottom: 1.059em; /* 17px */
  • font-size: 1.333em; line-height: 1.125; margin-bottom: 1.125em; /* 16px */
  • font-size: 1.250em; line-height: 1.120; margin-bottom: 1.120em; /* 15px */
  • font-size: 1.167em; line-height: 1.286; margin-bottom: 1.286em; /* 14px */
  • font-size: 1.083em; line-height: 1.385; margin-bottom: 1.385em; /* 13px */
  • font-size: 1.000em; line-height: 1.500; margin-bottom: 1.500em; /* 12px */
  • font-size: 0.9167em; line-height: 1.6364; margin-bottom: 1.6364em; /* 11px */
  • font-size: 0.833em; line-height: 1.800; margin-bottom: 1.800em; /* 10px */
  • font-size: 0.750em; line-height: 2.000; margin-bottom: 2.000em; /* 9px */
  • font-size: 0.667em; line-height: 2.250; margin-bottom: 2.250em; /* 8px */