CSS Letter Spacing Generator

/* =================================
   CSS Letter Spacing Examples
   ================================= */

/* Basic letter-spacing values */
.normal-spacing {
  letter-spacing: normal;
}

.tight-spacing {
  letter-spacing: -0.05em;
}

.loose-spacing {
  letter-spacing: 0.1em;
}

/* Heading styles with letter-spacing */
h1 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.02em; /* Tighten large text */
  text-transform: none;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Uppercase text needs more spacing */
.uppercase-text {
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Increase for readability */
}

.all-caps-heading {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* Small caps style */
.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.05em;
}

/* Button and label styles */
.button {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.label {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #6b7280;
}

.badge {
  text-transform: uppercase;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* Navigation links */
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Logo and brand text */
.logo-text {
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brand-tagline {
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.05em;
}

/* Body text - subtle spacing */
.body-text {
  letter-spacing: 0.01em; /* Very subtle increase */
  line-height: 1.7;
}

.article-body {
  letter-spacing: 0;
  line-height: 1.8;
}

/* Monospace code */
pre, code {
  font-family: 'Fira Code', 'Consolas', monospace;
  letter-spacing: 0; /* Normal for code */
}

/* Dramatic/decorative spacing */
.hero-title {
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.display-text {
  font-size: 5rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.spaced-out {
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.artistic-text {
  letter-spacing: 1em;
  text-align: center;
}

/* Responsive letter-spacing */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
    letter-spacing: -0.01em;
  }

  .hero-title {
    font-size: 2.5rem;
    letter-spacing: -0.02em;
  }

  .logo-text {
    letter-spacing: 0.1em;
  }
}

/* Accessibility - reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  /* Ensure letter-spacing doesn't animate */
  * {
    transition: letter-spacing 0s !important;
  }
}

/* Print styles */
@media print {
  body {
    letter-spacing: 0;
  }

  h1, h2, h3 {
    letter-spacing: 0;
  }
}

/* CSS Custom Properties for theming */
:root {
  --letter-spacing-tight: -0.05em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.1em;
  --letter-spacing-wider: 0.2em;
  --letter-spacing-widest: 0.5em;
}

.use-spacing-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.use-spacing-wide {
  letter-spacing: var(--letter-spacing-wide);
}

/* Font-size relative spacing adjustments */
.text-xs { letter-spacing: 0.05em; }
.text-sm { letter-spacing: 0.025em; }
.text-base { letter-spacing: 0; }
.text-lg { letter-spacing: -0.01em; }
.text-xl { letter-spacing: -0.015em; }
.text-2xl { letter-spacing: -0.02em; }
.text-3xl { letter-spacing: -0.025em; }
.text-4xl { letter-spacing: -0.03em; }

/* Animated letter-spacing (use sparingly) */
.hover-expand {
  letter-spacing: 0;
  transition: letter-spacing 0.3s ease;
}

.hover-expand:hover {
  letter-spacing: 0.1em;
}

/* Focus states for form inputs */
input, textarea {
  letter-spacing: 0.01em;
}

input:focus, textarea:focus {
  letter-spacing: 0.02em;
}

/* Special input types */
input[type="password"] {
  letter-spacing: 0.2em;
}

input[type="tel"],
input[type="number"] {
  letter-spacing: 0.1em;
}

/* Card and component text */
.card-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: #6b7280;
}

.card-body {
  letter-spacing: 0;
  line-height: 1.6;
}

/* Blockquote styling */
blockquote {
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

blockquote cite {
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Footer text */
.footer-text {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.footer-links {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Error and success messages */
.message {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

.error-text {
  letter-spacing: 0;
}

.success-text {
  letter-spacing: 0;
}