One thing you want to avoid when creating Font Classes is making the CSS class the same as the font-family: /*- not good -*/įont-family:"proxima-nova", Helvetica ,Arial, sans-serif Now whenever you want to change all menu navigation fonts, you change only one property! This requires a bit of planning ahead of time, but it is well worth the effort. Take this example: /*-Font Classes*/įont-family: Open-sans, Helvetica, Arial, sans-serif įont-family: Georgia, "Times New Roman", Times, serif įont-family:"proxima-nova",Helvetica,Arial,sans-serif įont-family:"adobe-garamond-pro", Georgia, "Times New Roman", Times, serif Why?įont classes are modular CSS that make future changes to your fonts a breeze, when used correctly. These should be general classes used throughout your site, instead of adding the class to your element, id, or the specific class you use to style that element. The Font Classes I am talking about are helper classes to make the fonts on your site easily changeable anytime you want.įont Classes are a CSS class added onto an element that will determine the font-family of the element and its children.
Let me begin by explaining that this is not about the CSS declaration “font,” “font-family,” etc. We’re starting with a specific, easy to implement topic: Font Classes This is the first installment on different areas of modular CSS. This setup allows us to move HTML structure and their CSS classes between projects while ensuring the output would remain consistent. Our front-end developers recently got together to discuss and formulate a set of standards to make all of our CSS as modular as possible. Here at Pixafy, we have always done our best to create great, elegant CSS based upon industry best practices.