liser/src/modules/letter-spacing.css

functional css help to optimizing design work and building responsive websites

.tracked {
  letter-spacing: 0.1em;
}
.tracked-tight {
  letter-spacing: -0.05em;
}
.tracked-mega {
  letter-spacing: 0.25em;
}

@media screen and (min-width: 30em) {
  .tracked-ns {
    letter-spacing: 0.1em;
  }
  .tracked-tight-ns {
    letter-spacing: -0.05em;
  }
  .tracked-mega-ns {
    letter-spacing: 0.25em;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .tracked-m {
    letter-spacing: 0.1em;
  }
  .tracked-tight-m {
    letter-spacing: -0.05em;
  }
  .tracked-mega-m {
    letter-spacing: 0.25em;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .tracked-ml {
    letter-spacing: 0.1em;
  }
  .tracked-tight-ml {
    letter-spacing: -0.05em;
  }
  .tracked-mega-ml {
    letter-spacing: 0.25em;
  }
}

@media screen and (min-width: 60em) {
  .tracked-l {
    letter-spacing: 0.1em;
  }
  .tracked-tight-l {
    letter-spacing: -0.05em;
  }
  .tracked-mega-l {
    letter-spacing: 0.25em;
  }
}