title: Roundtrip tagline: Typography - A crucial Branding Element description: J1 Template Roundtrip - Typography - A crucial Branding Element

tags: [ Template, Roundtrip, Typography ] index: [] categories: [ pages ]

permalink: /pages/public/start/roundtrip/typography/ regenerate: false

resources: [] resource_options:

- masthead:
    opacity:                          0.2
    slides:
      - url:                          /assets/images/pages/roundtrip/typography-1920.jpg
        alt:                          Photo by Alice Donovan Rousel on Unsplash
        caption:                      Photo by Alice Donovan Rouse on Unsplash
        caption_href:                 https://unsplash.com/alicekat/portfolio
        caption_color:                rgba(255, 255, 255, 0.8)

// Enable the Liquid Preprocessor // —————————————————————————– :page-liquid:

// Set other global page attributes here // —————————————————————————–

{% comment %} Liquid procedures ————————————————————— {% endcomment %} {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}

// NOTE: Initialize entry document paths // —————————————————————————– {% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls // include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc

// Additional Asciidoc page attributes goes here // —————————————————————————–

Typography

Typography serves as one the most crucial branding elements for any business. Typography matters for any media presenting text - for any sort of reading. Text will take on an important role of acting not only as plain text but will also serve as something like images.

Get ready for the big, the bold and the beautiful!

//////////

Mixing font sizes

See the example below. Two cards are tied together by a title of *Your Topic*. The taglines are different and focus on different things. Because the title is on each and every card of such a group, it makes sense to give the upper level headline a smaller font size than the tagline that decribes different features.

To not loose the focus on reading the text, font icons are used to support what a card decribes to get the readers orientated better. The left one has a camera symbol, the right one a speaker. The reader can expect two features: video and audio.

++++ <div id=“roundtrip_example_panel” class=“mt-2 mb-3”></div> ++++

The body text is the smallest in size. On one hand to save space on other hand the readers know in general what they can can expect to read about. To focus the body text, it's positioned in the middle and centered for optimal placement. A final quote text followed by a button in card footer guides the reader to a page to read more.

This simple example shows that content, placement and design of text was not choosen per chance. It is a good idea to spend some time on text and design.

//////////

Responsive Text

One common flaw seen in many templates and frameworks (sadly to say: the same to Bootstrap) is a lack of support for truly *responsive text*. While elements on a page resize fluidly, text still resizes on a fixed basis. To avoiding this issue, especially for heavily text focussed pages, J1 Template supports styles that fluidly scales text size and line-height to optimize readability for the user.

Below you find an example how text behaves if defined on a fixed basis - what you'll see quite often. Change the size of your Browser Window to see what will happen in terms of responsiveness.

++++ <div>

<button type="button" name="toggle-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
  <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-indigo-50 mr-1"></i>
  Toggle rtext
</button>
<div class="card card-flat mb-4">
  <div class="content">
    <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
    <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
    <p class="card-description toggle-description no-r-text">
      But I must explain to you how all this mistaken idea of denouncing
      pleasure and praising pain was born and I will give you a complete
      account of the system, and expound the actual teachings of the great
      explorer of the truth, the master-builder of human happiness.
      <br/><br/>
      No one rejects, dislikes, or avoids pleasure itself, because it is
      pleasure, but because those who do not know how to pursue pleasure
      rationally encounter consequences that are extremely painful. Nor
      again is there anyone who loves or pursues or desires to obtain pain
      of itself, because it is pain, but because occasionally circumstances
      occur in which toil and pain can procure him some great pleasure.
      <br/><br/>
      To take a trivial example, which of us ever undertakes laborious
      physical exercise, except to obtain some advantage from it? But who
      has any right to find fault with a man who chooses to enjoy a pleasure
      that has no annoying consequences, or one who avoids a pain that
      produces no resultant pleasure?
    </p>
  </div>
</div>

</div>

<script>

$('button[name="toggle-r-text"]').on('click', function (e) {
  $('p.toggle-description').toggleClass('no-r-text r-text-300');
  $('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
});

</script> ++++

To see Responsive Text `r-text` in action, use the button above to toggle on and off Responsive Text to see the difference!

Scaling Responsive Text

Responsive Text comes in five different scale factors in a range from 100 to

  1. Scaling `r-text` gives you the flexibility to use `r-text` everywhere. Or

you can offer different text sizes of your Web for vistors having a visual handicap or reading disabilities.

To see `r-text` scaling in action, click on the button above to resize the text from `r-text` level 300 to 500 back and forth. And again: resize your Browser and watch the size of this text body change to see responsiveness of the text in action.

++++ <div>

<button type="button" name="scale-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
  <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-indigo-50 mr-1"></i>
  Scale rtext
</button>
<div class="card card-flat mb-4">
  <div class="content">
    <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
    <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
    <p class="card-description scale-description r-text-300">
      On the other hand, we denounce with righteous indignation and dislike men who
      are so beguiled and demoralized by the charms of pleasure of the moment, so
      blinded by desire, that they cannot foresee the pain and trouble that are
      bound to ensue; and equal blame belongs to those who fail in their duty through
      weakness of will, which is the same as saying through shrinking from toil and pain.
      <br/><br/>
      These cases are perfectly simple and easy to distinguish. In a free hour, when
      our power of choice is untrammelled and when nothing prevents our being able to
      do what we like best, every pleasure is to be welcomed and every pain avoided.
      But in certain circumstances and owing to the claims of duty or the obligations
      of business is will frequently occur that pleasures have to be repudiated and
      annoyances accepted. The wise man therefore always holds in these matters to
      this principle of selection: he rejects pleasures to secure other greater
      pleasures, or else he endures pains to avoid worse pains.
    </p>
  </div>
</div>

</div>

<script>

$('button[name="scale-r-text"]').on('click', function (e) {
  $('p.scale-description').toggleClass('r-text-300 r-text-500');
  $('.scale-button').toggleClass('mdi-arrow-up mdi-arrow-down');
});

</script> ++++

Scale factors

As mentioned, `r-text` comes in five levels of size. The base of `r-text` are the Fibonacci numbers extracted from the Fibonacci series. These numbers are the most popular division ratios in typography. When speaking of the golden ratio (1: 1.618) in typography and graphic design, the Fibonacci numbers are usually the base.

The Fibonacci series are translated into CSS Media queries and scale a base font size accordingly. Additionaly, the resulting font scale series have multipliers (scale factors) ranging from 0.5 (50%) up to 1.0 (100%) of the base.

That way, five series are available by the five scale factors. See the following table how `r-text` scales.

cols=“3,2,7a”, options=“header”, role=“table-responsive mb-5”

|=============================================================================== |Property | Factor |Example text

|`r-text-100` |0.5 |

role=“r-text-100”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor erat, sed diam voluptua.

|`r-text-200` |0.7 |

role=“r-text-200”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor erat, sed diam voluptua.

|`r-text-300` |0.8 |

role=“r-text-300”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor erat, sed diam voluptua.

|`r-text-400` |0.9 |

role=“r-text-400”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor erat, sed diam voluptua.

|`r-text-500` |1.0 |

role=“r-text-500”

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor erat, sed diam voluptua.

|===============================================================================

Text in Action

User interfaces (UI) enable vistors to interact with a page, explore things on their own - playing around. Presenting a service or a product in simple nav elements may help to reduce to space needed - more can be placed on page. On other hand, navigation elements present by playful and interactive means.

The next two simple examples shows you what type of UI's may helpful to present a bunch of information *on a small footprint*: tabbed text by using Bootstrap's *Nav Pills*.

The design for the Bootstrap *nav pills* were change into MD Design. As all elements available with J1 Template, the _Meterial Design_ color palette is used. All Bootstrap base classes can be used to colorize:

cols=“5,7a”, options=“header”, role=“table-responsive mb-5”

|=============================================================================== |Property | Example

|`nav-pills-primary` | ++++ <button type=“button” class=“btn btn-primary btn-raised btn-round”>

color example

</button> ++++

|`nav-pills-secondary` | ++++ <button type=“button” class=“btn btn-secondary btn-raised btn-round”>

color example

</button> ++++

|`nav-pills-info` | ++++ <button type=“button” class=“btn btn-info btn-raised btn-round”>

color example

</button> ++++

|`nav-pills-success` | ++++ <button type=“button” class=“btn btn-success btn-raised btn-round”>

color example

</button> ++++

|`nav-pills-warning` | ++++ <button type=“button” class=“btn btn-warning btn-raised btn-round”>

color example

</button> ++++

|`nav-pills-danger` | ++++ <button type=“button” class=“btn btn-danger btn-raised btn-round”>

color example

</button> ++++

|===============================================================================

Plain Pills

++++ <div class=“row mt-3”>

<div class="col-md-6">

  <h5 class="notoc mb-3">Horizontal Tabs</h5>
  <ul class="nav nav-pills nav-pills-danger mt-2">
    <li class="nav-item"><a class="nav-link active" href="#pill1" data-toggle="tab" aria-expanded="true">Detracto</a></li>
    <li class="nav-item"><a class="nav-link" href="#pill2" data-toggle="tab" aria-expanded="false">Facer</a></li>
    <li class="nav-item"><a class="nav-link" href="#pill3" data-toggle="tab" aria-expanded="false">Dolor</a></li>
  </ul>

  <div class="tab-content tab-space">
    <div class="tab-pane active" id="pill1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua.
    </div>
    <div class="tab-pane" id="pill2">
      Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
      dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
      apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
      eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
      voluptatum pro te, saepe laoreet in est.
    </div>
    <div class="tab-pane" id="pill3">
      Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
      omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
      his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
      cu primis delenit.
    </div>
  </div>
</div>

<div class="col-md-6">
  <h5 class="notoc mb-3">Vertical Tabs</h5>
  <div class="row">

    <div class="col-md-4">
      <ul class="nav nav-pills nav-pills-primary nav-stacked mt-2">
        <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">Detracto</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Facer</a></li>
        <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Dolor</a></li>
      </ul>
    </div>

    <div class="col-md-8">
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua.
        </div>
        <div class="tab-pane" id="tab2">
          Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
          dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
          apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
          eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
          voluptatum pro te, saepe laoreet in est.
        </div>
        <div class="tab-pane" id="tab3">
          Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
          omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
          his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
          cu primis delenit.
        </div>
      </div>
    </div>

  </div>
</div>

</div> ++++

Pills + Icons

++++ <div class=“row mt-3”>

<div class="col-md-6">
<h5 class="notoc">Horizontal Tabs</h5>
  <ul class="nav nav-pills nav-pills-danger nav-pills-icons mt-2" role="tablist">

    <li class="nav-item">
      <a class="nav-link active" href="#h-tabs-1" role="tab" data-toggle="tab" aria-expanded="false">
        <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#h-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
        <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#h-tabs-3" role="tab" data-toggle="tab" aria-expanded="true">
        <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
      </a>
    </li>
  </ul>
  <div class="tab-content tab-space">
    <div class="tab-pane" id="h-tabs-1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua.
    </div>
    <div class="tab-pane" id="h-tabs-2">
      Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
      dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
      apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
      eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
      voluptatum pro te, saepe laoreet in est.
    </div>
    <div class="tab-pane active" id="h-tabs-3">
      Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
      omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
      his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
      cu primis delenit.
    </div>
  </div>
</div>
<div class="col-md-6">
<h5 class="notoc">Vertical Tabs</h5>
  <div class="row">
    <div class="col-md-4">
      <ul class="nav nav-pills nav-pills-icons nav-stacked mt-2" role="tablist">

        <li class="nav-item">
          <a class="nav-link active" href="#v-tabs-1" role="tab" data-toggle="tab" aria-expanded="true">
            <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#v-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
            <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#v-tabs-3" role="tab" data-toggle="tab" aria-expanded="false">
            <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
          </a>
        </li>
      </ul>
    </div>
    <div class="col-md-8">
      <div class="tab-content">
        <div class="tab-pane active" id="v-tabs-1">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
          eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
          voluptua.
        </div>
        <div class="tab-pane" id="v-tabs-2">
          Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
          dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
          apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
          eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
          voluptatum pro te, saepe laoreet in est.
        </div>
        <div class="tab-pane" id="v-tabs-3">
          Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
          omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
          his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
          cu primis delenit.
        </div>
      </div>
    </div>
  </div>
</div>

</div> ++++

What's next?

Have you enjoyed playing with text? We hope so. But more on can the J1 do for your web pages. With the examples on that page, icons were used to support the meaning what was grouped as text.

J1 template supports 2 popular icons font sets:

  • Material Design Icons

  • FontAwesome Icons V5

Would you like learn more about icons? The next example page focus on what's possible using {roundtrip-icon-fonts}[Material Design Icons].