Типографика - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="container">

  <div class="step--3">The Quick Brown Fox</div>

  <div class="step--2">The Quick Brown Fox</div>

  <div class="step--1">The Quick Brown Fox</div>

  <div class="step-0">The Quick Brown Fox</div>

  <div class="step-1">The Quick Brown Fox</div>

  <div class="step-2">The Quick Brown Fox</div>

  <div class="step-3">The Quick Brown Fox</div>

  <div class="step-4">The Quick Brown Fox</div>

  <div class="step-5">The Quick Brown Fox</div>

  <div class="step-6">The Quick Brown Fox</div>

  <div class="step-7">The Quick Brown Fox</div>

</div>

<div class="container">

  <div class="step--3">Micro</div>

  <div class="step--2"> Caption</div>

  <div class="step--1">Footnote</div>

  <div class="step-0">Body</div>

  <div class="step-1">Subhead</div>

  <div class="step-2">Heading</div>

  <div class="step-3">Title Charlie</div>

  <div class="step-4">Title Bravo</div>

  <div class="step-5">Title Alpha</div>

  <div class="step-6">Headline</div>

  <div class="step-7">Hero</div>

</div>

<div class="container">

  <div class="step--3">Type</div>

  <div class="step--2">Type</div>

  <div class="step--1">Type</div>

  <div class="step-0">Type</div>

  <div class="step-1">Type</div>

  <div class="step-2">Type</div>

  <div class="step-3">Type</div>

  <div class="step-4">Type</div>

  <div class="step-5">Type</div>

  <div class="step-6">Type</div>

  <div class="step-7">Type</div>

</div>

<div class="container">

  <div class="step-0">Curabitur est gravida et libero vitae dictum. Prima luce, cum quibus mons aliud consensu ab eo. Quam diu etiam furor iste tuus nos eludet?A communi observantia non est recedendum. Quo usque tandem abutere, Catilina, patientia nostra? Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Cras mattis iudicium purus sit amet fermentum. Quae vero auctorem tractata ab fiducia dicuntur. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae. Quam temere in vitiis, legem sancimus haerentia.</div>

</div>

<div class="container center">

  <div class="step-6 intro-title">I’m Alan. A <strong>Lead UI/UX</strong> Digital Product Designer and Developer</div>

</div>

html {

  box-sizing: border-box;

}



*,

*:before,

*:after {

  box-sizing: inherit;

}



body {

  background: lightgray;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 16px;

  padding-bottom: 164px;

}



/* @link https://utopia.fyi/type/calculator?c=320,16,1.12,1440,21,1.2,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */

:root {

  --step--3: clamp(0.71rem, 0.7rem + 0.07vw, 0.76rem);

  --step--2: clamp(0.8rem, 0.77rem + 0.16vw, 0.91rem);

  --step--1: clamp(0.89rem, 0.84rem + 0.29vw, 1.09rem);

  --step-0: clamp(1rem, 0.91rem + 0.45vw, 1.31rem);

  --step-1: clamp(1.12rem, 0.99rem + 0.65vw, 1.58rem);

  --step-2: clamp(1.25rem, 1.07rem + 0.91vw, 1.89rem);

  --step-3: clamp(1.41rem, 1.16rem + 1.23vw, 2.27rem);

  --step-4: clamp(1.57rem, 1.25rem + 1.64vw, 2.72rem);

  --step-5: clamp(1.76rem, 1.33rem + 2.15vw, 3.27rem);

  --step-6: clamp(1.97rem, 1.42rem + 2.78vw, 3.92rem);

  --step-7: clamp(2.21rem, 1.5rem + 3.56vw, 4.7rem);

}



.step--3 {

  font-size: var(--step--3);

}



.step--2 {

  font-size: var(--step--2);

}



.step--1 {

  font-size: var(--step--1);

}



.step-0 {

  font-size: var(--step-0);

}



.step-1 {

  font-size: var(--step-1);

}



.step-2 {

  font-size: var(--step-2);

}



.step-3 {

  font-size: var(--step-3);

}



.step-4 {

  font-size: var(--step-4);

}



.step-5 {

  font-size: var(--step-5);

}



.step-6 {

  font-size: var(--step-6);

}



.step-7 {

  font-size: var(--step-7);

}



[class^=step] {

  line-height: 140%;

  max-width: 60ch;

  font-family: neue-haas-grotesk-text, sans-serif;

  font-weight: 400;

  font-style: normal;

  position: relative;

  padding-left: 40px;

}



.size-value {

  background: darkblue;

  position: absolute;

  left: 0;

  top: 50%;

  transform: translateY(-50%);

  width: 32px;

  height: 16px;

  border-radius: 4px;

  font-size: 10px;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

}



.step--3,

.step--2,

.step--1,

.step-0,

.step-1 {

  font-family: neue-haas-grotesk-text, sans-serif;

  font-weight: 400;

  font-style: normal;

}



.intro-title {

  max-width: 23ch;

  font-family: neue-haas-grotesk-display, sans-serif;

  font-weight: 300;

  line-height: 1.2;

}

.intro-title strong {

  font-weight: 500;

  font-style: normal;

}



.container {

  width: 100%;

  max-width: -webkit-max-content;

  max-width: -moz-max-content;

  max-width: max-content;

  margin: 24px;

  background: #fff;

  padding: 16px;

  border-radius: 8px;

  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.125);

  display: flex;

  flex-direction: column;

}



.center {

  text-align: center;

  align-items: center;

}

const prependedDiv = num => `
${num}
`;



$("div[class^=step]").prepend(prependedDiv(15));



$(window).

resize(function () {

  console.log("resized!");

  $("div[class^=step]").each(function () {

    let fontSize = $(this).css("font-size");

    fontSize = parseFloat(fontSize).toFixed(2);

    $(this).children(".size-value").text(fontSize);

  });

}).

resize();

//# sourceURL=pen.js