\n\t\t
\n\t\tLato
\n\t\t<\/a>
\n\t<\/h4>\nLato is our global font. Unless defined the default will always be ‘Lato’ 400.<\/p>\n
\n\t\t
\n\t\tRoboto
\n\t\t<\/a>
\n\t<\/h4>\nBody and caption font. Will always be defined when used.<\/p>\n
\n\t\tFont Sizes
\n\t<\/h2>\n
Rather than px we will be using the rem unit. This references the pages root font size and eliminates cascade issues. The minimum font size should never be smaller than 10px.<\/p>\n
\n\t\tConversion chart
\n\t<\/h4>\n
\t\t\t\t![\"Screen](\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Screen-Shot-2018-06-01-at-2.32.22-PM.png\" "\\"Screen")
<\/p>\n
\n\t\tThis needs review
\n\t<\/h3>\n\nh1 {\n font-size: 1.8rem;\n line-height: 1.45rem;\n padding-top: 0.379rem;\n margin-bottom: 0.345rem;\n}\nh2 {\n font-size: 1.7rem;\n line-height: 1.75rem;\n padding-top: 0.542rem;\n margin-bottom: 0.333rem;\n}\nh3 {\n font-size: 1.4rem;\n line-height: 1.05rem;\n padding-top: 0.200rem;\n margin-bottom: 0.850rem;\n}\nh4 {\n font-size: 1.2rem;\n line-height: 1.24rem;\n padding-top: 0.294rem;\n margin-bottom: 0.941rem;\n}\np {\n font-size: 1.00rem;\n line-height: 1.50rem;\n padding-top: 0.429rem;\n margin-bottom: 1.07rem;\n}\n<\/pre>\n\n\t\tFont Weights
\n\t<\/h2>\n
Font weights are a crucial component of NeonCRM. They help establish clear hierarchy and groups of content. Font weights ensure that content and headings are balanced and logical. Bold font weights are useful for emphasizing titles or context-specific keywords in the description text on whichever page they are“` needed. Regular font weights can be used as headers as well, starting with the h4 style (specified in the living style guide) up to h1.<\/p>\n
<\/p>\n
Lato and Roboto provide a variance of weights that can give you the flexibility to make our content more meaningful. However, we have chosen to stick with the Bold and Regular weights for each font.<\/p>\n
\n\t\t
\n\t\tExample fonts
\n\t\t<\/a>
\n\t<\/h4>\n\n\t\tLato 400
\n\t<\/h2>\n\n\t\tLato 700
\n\t<\/h2>\n\n\t\tRoboto 700
\n\t<\/h2>\n\n\t\tRoboto 400
\n\t<\/h2>\n","protected":false},"excerpt":{"rendered":"
Style Typography We use typography to help convey our brand’s voice as a company, and establishes clarity for our customers data, while also emphasizing clear call-to-actions in our product to help them make our customers experience more productive. Fonts We have chosen both\u00a0Lato\u00a0and\u00a0Roboto\u00a0as our brand\/product fonts. These typefaces not only have open-source licenses, which allow…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\t\tRoboto
\n\t\t<\/a>
\n\t<\/h4>\n
Body and caption font. Will always be defined when used.<\/p>\n
\n\t\tFont Sizes
\n\t<\/h2>\n
Rather than px we will be using the rem unit. This references the pages root font size and eliminates cascade issues. The minimum font size should never be smaller than 10px.<\/p>\n
\n\t\tConversion chart
\n\t<\/h4>\n
\t\t\t\t<\/p>\n
\n\t\tThis needs review
\n\t<\/h3>\n\nh1 {\n font-size: 1.8rem;\n line-height: 1.45rem;\n padding-top: 0.379rem;\n margin-bottom: 0.345rem;\n}\nh2 {\n font-size: 1.7rem;\n line-height: 1.75rem;\n padding-top: 0.542rem;\n margin-bottom: 0.333rem;\n}\nh3 {\n font-size: 1.4rem;\n line-height: 1.05rem;\n padding-top: 0.200rem;\n margin-bottom: 0.850rem;\n}\nh4 {\n font-size: 1.2rem;\n line-height: 1.24rem;\n padding-top: 0.294rem;\n margin-bottom: 0.941rem;\n}\np {\n font-size: 1.00rem;\n line-height: 1.50rem;\n padding-top: 0.429rem;\n margin-bottom: 1.07rem;\n}\n<\/pre>\n\n\t\tFont Weights
\n\t<\/h2>\n
Font weights are a crucial component of NeonCRM. They help establish clear hierarchy and groups of content. Font weights ensure that content and headings are balanced and logical. Bold font weights are useful for emphasizing titles or context-specific keywords in the description text on whichever page they are“` needed. Regular font weights can be used as headers as well, starting with the h4 style (specified in the living style guide) up to h1.<\/p>\n
<\/p>\n
Lato and Roboto provide a variance of weights that can give you the flexibility to make our content more meaningful. However, we have chosen to stick with the Bold and Regular weights for each font.<\/p>\n
\n\t\t
\n\t\tExample fonts
\n\t\t<\/a>
\n\t<\/h4>\n\n\t\tLato 400
\n\t<\/h2>\n\n\t\tLato 700
\n\t<\/h2>\n\n\t\tRoboto 700
\n\t<\/h2>\n\n\t\tRoboto 400
\n\t<\/h2>\n","protected":false},"excerpt":{"rendered":"
Style Typography We use typography to help convey our brand’s voice as a company, and establishes clarity for our customers data, while also emphasizing clear call-to-actions in our product to help them make our customers experience more productive. Fonts We have chosen both\u00a0Lato\u00a0and\u00a0Roboto\u00a0as our brand\/product fonts. These typefaces not only have open-source licenses, which allow…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\t\tFont Weights
\n\t<\/h2>\n
Font weights are a crucial component of NeonCRM. They help establish clear hierarchy and groups of content. Font weights ensure that content and headings are balanced and logical. Bold font weights are useful for emphasizing titles or context-specific keywords in the description text on whichever page they are“` needed. Regular font weights can be used as headers as well, starting with the h4 style (specified in the living style guide) up to h1.<\/p>\n
<\/p>\n
Lato and Roboto provide a variance of weights that can give you the flexibility to make our content more meaningful. However, we have chosen to stick with the Bold and Regular weights for each font.<\/p>\n
\n\t\t
\n\t\tExample fonts
\n\t\t<\/a>
\n\t<\/h4>\n\n\t\tLato 400
\n\t<\/h2>\n\n\t\tLato 700
\n\t<\/h2>\n\n\t\tRoboto 700
\n\t<\/h2>\n\n\t\tRoboto 400
\n\t<\/h2>\n","protected":false},"excerpt":{"rendered":"
Style Typography We use typography to help convey our brand’s voice as a company, and establishes clarity for our customers data, while also emphasizing clear call-to-actions in our product to help them make our customers experience more productive. Fonts We have chosen both\u00a0Lato\u00a0and\u00a0Roboto\u00a0as our brand\/product fonts. These typefaces not only have open-source licenses, which allow…<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":5,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":1155,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/60\/revisions\/1155"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\t<\/h2>\n
\n\t\tLato 700
\n\t<\/h2>\n\n\t\tRoboto 700
\n\t<\/h2>\n\n\t\tRoboto 400
\n\t<\/h2>\n","protected":false},"excerpt":{"rendered":"
\n\t<\/h2>\n