xrpl-dev-portal/styles/_font.scss

$base-size: 1rem;
// Font Settings ===============================================================
body {
  // font-feature-settings: "liga", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

pre, code {
  /* Disable ligatures on code-font, so, for example,
  </ doesn't become a diagonal arrow. */
  font-feature-settings: "liga" 0;
  font-variant-ligatures: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: bold;
}

h1, .h1 {
  font-size: 3.875rem;
  line-height: 70px;
  @media (max-width: 480px) {
    font-size: 2.625rem;
    line-height: 48px;
  }
}
h2, .h2 {
  font-size: 3.5rem;
  line-height: 62px;
  @include media-breakpoint-down(sm) {
    font-size: 1.75rem;
    line-height: 34px;
  }
}
h3, .h3 {
  font-size: 3rem;
  line-height: 52px;
  @include media-breakpoint-down(sm) {
    font-size: 1.25rem;
    line-height: 28px;
  }
  &-sm {
    @include media-breakpoint-down(sm) {
      font-size: 1.25rem;
      line-height: 28px;
    }
  }
}
h4, .h4 {
  font-size: 2rem;
  line-height: 38px;
  @include media-breakpoint-down(sm) {
    font-size: 1.125rem;
    line-height: 26px;
  }
}
h5, .h5 {
  font-size: 1.5rem;
  line-height: 32px;
  @include media-breakpoint-down(sm) {
    font-size: 1rem;
    line-height: 24px;
  }
}
h6, .h6 {
  font-size: 1.25rem;
  line-height: 26px;
  @include media-breakpoint-down(sm) {
    font-size: 1rem;
    line-height: 24px;
  }
}
.longform {
  font-size: 1.5rem;
  line-height: 32px;
  color: $gray-100;
  font-weight: normal;
  @include media-breakpoint-down(sm) {
    font-size: 1.125rem;
    line-height: 26px;
  }
}
.numbers {
  font-size: 6rem;
  line-height: 104px;
  font-weight: bold;
  color: $white;
  @include media-breakpoint-down(sm) {
    font-size: 3.875rem;
    line-height: 70px;
  }
}
p {
  color: $gray-200;
  font-size: 1rem;
  line-height: 24px;
}

// a {
//   color: inherit;
//   &:hover {
//     text-decoration: none;
//   }
// }
// p a {
//   color: $blue-purple-400;
//   &:hover {
//     color: $blue-purple-400;
//     text-decoration: none;
//   }
// }

.fs-base {
  font-size: $base-size;
}
.fs-3 {
  font-size: 0.75rem;
  line-height: 1rem;
}
.fs-4-5 {
  font-size: 1.125rem;
}
.fs-5 {
  font-size: 1.25rem;
}
.fs-5-5 {
  font-size: 1.375rem;
}
.fs-6 {
  font-size: 1.5rem;
}
.normal {
  font-weight: normal;
}
.bold {
  font-weight: bold;
}

.text-largest {
  font-size: 1.5rem;
  font-weight: normal;
}
.text-large {
  font-size: 1.125rem;
}
.text-small {
  font-size: 0.875rem;
}
.text-smaller {
  font-size: 0.75rem;
}
.text-smallest {
  font-size: 0.625rem;
}

/* STYLIZED LINKS */
.arrow-link {
  text-decoration: none;
}
.arrow-link:after {
  content: url(../img/icon-green-arrow.svg);
  width: 28px;
  padding-left: 7px;
  transition: all .2s ease-in-out;
  display: inline-block;
  text-decoration: none;
}
.arrow-link:hover:after {
  padding-left: 14px;
}

/* Japanese language font override ------------------------------------------ */

.lang-ja {
  font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
  h1, h2, h3, h4, h5,
  .github-edit-wrap .github-edit,
  .navbar .navbar-nav .nav-link,
  .content .children-display li a,
  .right-sidebar .level-1 a,
  .right-sidebar .separator,
  .use-case-step-num {
    font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
  }

  // .section-marker {
  //   transform: unset;
  //   writing-mode: vertical-rl;
  //   font-family: 'Work Sans', 'Noto Sans JP', sans-serif;
  // }

  &.page-calculator #data-selector li a {
    padding: 0.5rem 1.1rem;
  }
}