_typography.scss 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /******************************************************************
  2. Site Name:
  3. Author:
  4. Stylesheet: Typography
  5. Need to import a font or set of icons for your site? Drop them in
  6. here or just use this to establish your typographical grid. Or not.
  7. Do whatever you want to...GOSH!
  8. Helpful Articles:
  9. http://trentwalton.com/2012/06/19/fluid-type/
  10. http://ia.net/blog/responsive-typography-the-basics/
  11. http://alistapart.com/column/responsive-typography-is-a-physical-discipline
  12. ******************************************************************/
  13. /*********************
  14. FONT FACE (IN YOUR FACE)
  15. *********************/
  16. /* To embed your own fonts, use this syntax
  17. and place your fonts inside the
  18. library/fonts folder. For more information
  19. on embedding fonts, go to:
  20. http://www.fontsquirrel.com/
  21. Be sure to remove the comment brackets.
  22. */
  23. /* @font-face {
  24. font-family: 'Font Name';
  25. src: url('library/fonts/font-name.eot');
  26. src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
  27. url('library/fonts/font-name.woff') format('woff'),
  28. url('library/fonts/font-name.ttf') format('truetype'),
  29. url('library/fonts/font-name.svg#font-name') format('svg');
  30. font-weight: normal;
  31. font-style: normal;
  32. }
  33. */
  34. /*
  35. The following is based of Typebase:
  36. https://github.com/devinhunt/typebase.css
  37. I've edited it a bit, but it's a nice starting point.
  38. */
  39. // font stacks
  40. $sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  41. $serif: "Georgia", Cambria, Times New Roman, Times, serif;
  42. /*
  43. i imported this one in the functions file so bones would look sweet.
  44. don't forget to remove it for your site.
  45. */
  46. $lato: 'Lato', $sans-serif;
  47. /*
  48. some nice typographical defaults
  49. more here: http://www.newnet-soft.com/blog/csstypography
  50. */
  51. p {
  52. -ms-word-break: break-all;
  53. -ms-word-wrap: break-all;
  54. word-break: break-word;
  55. word-break: break-word;
  56. // cleaning up the ragged lines and breaks
  57. -webkit-hyphens: auto;
  58. -moz-hyphens: auto;
  59. hyphens: auto;
  60. // sets a minimum number of characters before and after the break
  61. -webkit-hyphenate-before: 2;
  62. -webkit-hyphenate-after: 3;
  63. hyphenate-lines: 3;
  64. // enabling fancy ligatures when available
  65. -webkit-font-feature-settings: "liga", "dlig";
  66. -moz-font-feature-settings: "liga=1, dlig=1";
  67. -ms-font-feature-settings: "liga", "dlig";
  68. -o-font-feature-settings: "liga", "dlig";
  69. font-feature-settings: "liga", "dlig";
  70. }