---
title:                                  Typography
title_extention:                        Crucial branding element for J1 Template
tagline:                                Crucial Branding Element

date:                                   2020-11-05
#last_modified:                         2023-01-01

description: >
                                        J1 Template places the character font as one of the
                                        most crucial branding elements for any website. The
                                        text take on an important role of acting not only as
                                        plain text but also as something like images.
keywords: >
                                        open source, free, template, jekyll, jekyllone, web,
                                        sites, static, jamstack, bootstrap,
                                        brand, typography, font

categories:                             [ Roundtrip ]
tags:                                   [ Module, Typography ]

image:
  path:                                 /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
  width:                                1920
  height:                               1280

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

resources:                              [ animate, rouge ]
resource_options:
  - attic:
      opacity:                          0.3
      preload:                          0
      transitionDuration:               fast
      resolutionRefreshRate:            500
      slides:
        - url:                          /assets/images/pages/roundtrip/typography-1920x1280-bw.jpg
          alt:                          Photo by Alice Donovan Rousel on Unsplash
          badge:
            type:                       unsplash
            author:                     Alice Donovan Rousel
            href:                       //unsplash.com/@alicekat/portfolio
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}


// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[role="dropcap"]
The Jekyll Theme J1 places the character font as one of the most crucial
branding elements for any website. Typography matters for any page
presenting text. The text will take on an important role of acting not
only as plain text but also as something like images.

mdi:clock-time-five-outline[24px, md-gray mt-5 mr-2]
*5 Minutes* to read

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
[role="mt-5"]
== Responsive Text

Sadly to say, one common flaw is seen in many templates and frameworks:
the lack of support for responsive text. While elements on a page resize
fluidly, the text still resizes on a fixed basis. To avoid this issue,
especially for heavily text-focused pages, J1 Template supports styles that
fluidly scale text in size and line height to optimize readability for the
user.

Below you find an example of 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-flex mt-3 mb-3">
    <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
    Toggle rtext
  </button>
  <div class="speak2me-ignore mb-4">
    <div class="content">
      <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
      <h3 class="notoc">The Extremes of Good and Evil</h3>
      <p class="small notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</p>
      <p class="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>
++++


[role="mt-5"]
== Text Scaling

Responsive text comes in five different scale factors in a range from 100
to 500. Scaling `r-text` gives you the flexibility to use responsive text
`r-text` everywhere. Or you can offer different text sizes of your Web for
visitors having visual handicaps or reading disabilities *without* bothering
your visitors for changing their browser settings.

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

++++
<div>
  <button type="button" name="scale-r-text" class="btn btn-primary btn-flex mt-3 mb-3">
    <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
    Scale rtext
  </button>
  <div class="speak2me-ignore mb-4">
    <div class="content">
      <!-- jadams, 2020-11-15: adjusted heading levels (Google optimisation) -->
      <h3 class="notoc">The Extremes of Good and Evil</h3>
      <p class="small notoc text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</p>
      <p class="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>
++++


[role="mt-5"]
== Scale factors

As mentioned, responsive text `r-text` comes in five levels of size. The
base of responsive text `r-text` is the Fibonacci numbers extracted from
the Fibonacci series.

These numbers are the most popular division ratios in typography. Fibonacci
numbers are relevant in design and typography due to their prevalence in
natural patterns.

The Fibonacci series is translated into CSS Media queries and scales a base
font in size accordingly. Further, the resulting font scale series have
multipliers ranging from 100 up to 500, resulting in 100% of the base.

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

.Scale factors
[cols="3a,3a,6a", options="header", width="100%", role="table-responsive mt-4"]
|===
|Property |Factor |Example text

|`r-text-100`
|0.5
|
[role="r-text-100"]
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.

|`r-text-200`
|0.7
|
[role="r-text-200"]
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.

|`r-text-300`
|0.8
|
[role="r-text-300"]
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.

|`r-text-400`
|0.9
|
[role="r-text-400"]
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.

|`r-text-500`
|1.0
|
[role="r-text-500"]
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.

|===


[role="mt-5"]
== What next

Have you enjoyed playing with the text? I hope so. But even more, the template
J1 can do for your web pages. With the examples on the following page, find how
icons support the meaning of what was grouped as text.

J1 Template supports popular icons font sets out-of-the-box. The icon sets MDI
and FA are very good in design and have a rich set of different icon elements
for many categories used for the Web.

With J1 Template, the following icons font sets are available out-of-the-box
like:

* Material Design Icons (MDI)
* FontAwesome Icons V5 (FA)
* Iconify Icon Sets

[role="mb-7"]
Would you like to learn more about using icons? The next example page focus
on what's possible using link:{url-roundtrip--icon-fonts}[Icon Fonts, {browser-window--new}]
on your pages.