{"id":1718,"date":"2019-09-19T06:49:55","date_gmt":"2019-09-19T06:49:55","guid":{"rendered":"https:\/\/demos.pixelgrade.com\/tosca\/?page_id=1718"},"modified":"2022-05-02T13:01:36","modified_gmt":"2022-05-02T13:01:36","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/trial.pixelgrade.com\/tosca\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"\n

The Style Guide<\/h1>\n\n\n\n

Typography is more than just what fonts you use. Typography is everything that has to do with how the text looks\u2014such as font size, line length, color, and even more subtle things like the whitespace around a text. Good typography sets the tone of your written message and helps to reinforce its meaning and context.<\/p>\n\n\n\n

Display <\/h1>\n\n\n\n

Heading One<\/h1>\n\n\n\n

Secondary Heading<\/mark><\/h2>\n\n\n\n

Heading Three<\/h3>\n\n\n\n

Heading Four<\/h4>\n\n\n\n

Heading Five & Six<\/h5>\n\n\n\n

A lead paragraph is a short paragraph set in a larger font size that opens an article. The purpose of a lead paragraph<\/a> is to give the reader a quick summary of the story and provide a hook to entice further reading.<\/p>\n\n\n\n

Paragraphs only need enough space below<\/kbd> them to let the reader know they are starting on a new paragraph. Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don\u2019t want huge gaps all down your page.<\/p>\n\n\n\n

\n
Primary Button<\/a><\/div>\n\n\n\n
Secondary<\/a><\/div>\n\n\n\n
Text Button<\/a><\/div>\n<\/div>\n\n\n\n

Are you still making bulleted and numbered lists<\/strong> by manually typing bullets or numbers at the beginning of each line? In the 21st century, this is a task no one should be done by hand.<\/p>\n\n\n\n

  1. The dining experience.<\/strong> Apart from serving good food, customers look for a good overall experience when they visit a restaurant. When you go out, you want to know that you are eating in a clean environment and getting the best service<\/li>
  2. High quality food.<\/mark> <\/strong>This is the best way to attract more customers to your restaurant. Always taste-test your food so that you know how it tastes and you know your customers will like it. <\/li>
  3. The price factor. <\/strong>We should always price their food right. If your food is overpriced for its taste, customers will definitely lose interest.<\/li><\/ol>\n\n\n\n\t\t
    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Heading Two Formatting<\/h2>\n\n\n\n

    Opening paragraphs often deserve some form of decorative type treatment to help draw the reader in. Two such methods are initial small caps and drop caps. Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph. <\/p>\n\n\n\n

    \u201cDining is and always was a great artistic opportunity<\/mark>. Study and love nature, it will never fail you.\u201d<\/strong><\/p>Frank Lloyd Wright, 1959<\/cite><\/blockquote><\/figure>\n\n\n\n

    Any more space than that is distracting and breaks up the flow of reading. White space is important, but you don\u2019t want huge gaps all down your page. These special type of treatments<\/a> serve to mark a clear beginning to an article and can add a sense of formality. Drop caps have a long history of typography, dating back to the earliest days of typesetting.<\/p>\n\n\n\n

    Paragraphs only need enough space below them to let the reader know they are starting on a new paragraph. Any more space than that is distracting and breaks up the flow of reading. White space<\/strong> is important, but you don\u2019t want huge gaps all down your page.<\/p>\n\n\n\n

    Heading Three<\/h3>\n\n\n\n

    Tables are useful for layouts where text needs to be positioned side-by-side or floating at specific locations<\/a> on the page. If making these is frustrating with the usual layout tools, try using a table.<\/p>\n\n\n\n

    Type<\/strong><\/td>Font<\/strong><\/td>Description<\/strong><\/td><\/tr>
    Humanist<\/strong><\/td>Sabon<\/td>Closely connected to calligraphy<\/td><\/tr>
    Transitional<\/strong><\/td>Baskerville<\/td>More abstract and less organic<\/td><\/tr>
    Modern<\/strong><\/td>Bodoni<\/td>Note the thin, straight serifs<\/td><\/tr>
    Slab Serif<\/strong><\/td>Clarendon<\/td>Egyptian typefaces have heavy serifs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    To accentuate a text<\/strong><\/em>, you simply need to apply to it both methods of emphasis: bold<\/strong> and italic<\/em> altogether.<\/p>\n\n\n\n

    You can also highlight a text<\/mark> using the Highlight<\/em> text style option with any background color. Apply only a text color<\/strong><\/mark> to apply an alternative highlight styling.<\/p>\n\n\n\n

    Text Highlights<\/h2>\n\n\n\n

    Highlight only using the text color<\/mark><\/h4>\n\n\n\n

    Highlight only using the background color<\/mark><\/h4>\n\n\n\n\t\t
    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Separators<\/h2>\n\n\n\n

    Decorative<\/strong>: simple ornament used to highlight headlines<\/p>\n\n\n\n\t\t

    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Elaborate<\/strong>: sophisticated separator, having together both styles <\/p>\n\n\n\n\t\t

    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Simple<\/strong>: a plain separator is used to space out sections.<\/p>\n\n\n\n\t\t

    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Blank<\/strong>: a transparent separator (not visible to the user) only used to space out sections using the Space and Sizing<\/em> component.<\/p>\n\n\n\n\t\t

    \n\t\t\t\n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t\t
    \n\t\t\t\t<\/svg>\n<\/span>\n\t\t\t<\/div>\n\t\t\t
    <\/div>\n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n\n\n

    Code<\/h3>\n\n\n\n

    The inline code<\/code> style displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.<\/p>\n\n\n\n

    The Keyboard input<\/kbd> style represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.<\/p>\n\n\n\n

    The Code block represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced<\/a>, font. Whitespace inside this element is displayed as written.<\/p>\n\n\n\n

    pre {\n\tmargin: 0 0 5px;\n\tfont-weight: bold;\n\tfont-size: 16px;\n\tline-height: 1.5;\n}<\/pre>\n\n\n\n
    And that\u2019s a wrap, yo! You survived the tumultuous waters of a proper Style Guide.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The Style Guide Typography is more than just what fonts you use. Typography is everything that has to do with how the text looks\u2014such as […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"novablocks_hero_scroll_indicator":false,"novablocks_hero_position_indicators":false,"supernova_prevent_duplicate":false,"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/1718"}],"collection":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/comments?post=1718"}],"version-history":[{"count":8,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/1718\/revisions"}],"predecessor-version":[{"id":4961,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/1718\/revisions\/4961"}],"wp:attachment":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/media?parent=1718"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}