CSS Typography

/* CSS Typography Properties */

/* Font Family */
.font-family {
  font-family: Arial, sans-serif; /* Generic family as fallback */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Font stack */
  font-family: 'Roboto', sans-serif; /* Web font */
}

/* Font Size */
.font-size {
  font-size: 16px; /* Absolute size in pixels */
  font-size: 1rem; /* Relative to root element */
  font-size: 1em; /* Relative to parent element */
  font-size: 100%; /* Percentage of parent's font size */
  font-size: larger; /* Relative keywords */
  font-size: smaller;
}

/* Font Weight */
.font-weight {
  font-weight: normal; /* Normal weight */
  font-weight: bold; /* Bold weight */
  font-weight: 700; /* Numeric value between 100-900 */
  font-weight: lighter; /* Lighter than parent */
  font-weight: bolder; /* Bolder than parent */
}

/* Font Style */
.font-style {
  font-style: normal; /* Normal style */
  font-style: italic; /* Italic style */
  font-style: oblique; /* Oblique style (similar to italic) */
}

/* Font Variant */
.font-variant {
  font-variant: normal; /* Normal variant */
  font-variant: small-caps; /* Small caps variant */
}

/* Line Height */
.line-height {
  line-height: normal; /* Browser default */
  line-height: 1.5; /* Unitless multiplier */
  line-height: 1.5em; /* With units */
  line-height: 150%; /* Percentage */
}

/* Letter Spacing */
.letter-spacing {
  letter-spacing: normal; /* Default spacing */
  letter-spacing: 2px; /* Positive values increase spacing */
  letter-spacing: -1px; /* Negative values decrease spacing */
}

/* Word Spacing */
.word-spacing {
  word-spacing: normal; /* Default spacing */
  word-spacing: 5px; /* Positive values increase spacing */
  word-spacing: -2px; /* Negative values decrease spacing */
}

/* Text Transform */
.text-transform {
  text-transform: none; /* No transformation */
  text-transform: capitalize; /* Capitalizes first letter of each word */
  text-transform: uppercase; /* Transforms all text to uppercase */
  text-transform: lowercase; /* Transforms all text to lowercase */
  text-transform: full-width; /* Transforms to full-width characters */
}

/* Text Decoration */
.text-decoration {
  text-decoration: none; /* No decoration */
  text-decoration: underline; /* Underlined text */
  text-decoration: overline; /* Overlined text */
  text-decoration: line-through; /* Line through text */
  text-decoration: underline overline; /* Multiple decorations */
}

/* Text Align */
.text-align {
  text-align: left; /* Aligns text to the left */
  text-align: right; /* Aligns text to the right */
  text-align: center; /* Centers text */
  text-align: justify; /* Justifies text */
  text-align: justify-all; /* Justifies all lines including the last */
  text-align: start; /* Similar to left in LTR languages */
  text-align: end; /* Similar to right in LTR languages */
}

/* Text Indent */
.text-indent {
  text-indent: 0; /* No indentation */
  text-indent: 20px; /* Indentation with fixed units */
  text-indent: 5%; /* Percentage indentation */
  text-indent: 2em; /* Relative to font size */
  text-indent: -20px; /* Negative indentation (hanging indent) */
}

/* Vertical Align */
.vertical-align {
  vertical-align: baseline; /* Aligns with baseline */
  vertical-align: sub; /* Aligns as subscript */
  vertical-align: super; /* Aligns as superscript */
  vertical-align: top; /* Aligns with top of line */
  vertical-align: text-top; /* Aligns with top of parent's font */
  vertical-align: middle; /* Aligns with middle of line */
  vertical-align: bottom; /* Aligns with bottom of line */
  vertical-align: text-bottom; /* Aligns with bottom of parent's font */
}

/* White Space */
.white-space {
  white-space: normal; /* Normal white space handling */
  white-space: nowrap; /* Prevents text wrapping */
  white-space: pre; /* Preserves white space */
  white-space: pre-wrap; /* Preserves white space but wraps */
  white-space: pre-line; /* Collapses white space but preserves line breaks */
  white-space: break-spaces; /* Similar to pre-wrap but breaks spaces */
}

/* Word Break */
.word-break {
  word-break: normal; /* Default line break rules */
  word-break: break-all; /* Break words between any characters */
  word-break: keep-all; /* Don't break words in CJK text */
  word-break: break-word; /* Break long words (deprecated, use overflow-wrap) */
}

/* Overflow Wrap */
.overflow-wrap {
  overflow-wrap: normal; /* Default line breaking behavior */
  overflow-wrap: anywhere; /* Break words at any point if needed */
  overflow-wrap: break-word; /* Break words only if they would overflow */
}

/* Text Shadow */
.text-shadow {
  text-shadow: none; /* No shadow */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* horizontal vertical blur color */
  text-shadow: 0 0 5px #ff0000; /* Glow effect */
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; /* Multiple shadows */
}

/* Font Kerning */
.font-kerning {
  font-kerning: auto; /* Browser decides */
  font-kerning: normal; /* Kerning applied */
  font-kerning: none; /* No kerning */
}

/* Font Variant Ligatures */
.font-variant-ligatures {
  font-variant-ligatures: normal; /* Normal ligatures */
  font-variant-ligatures: none; /* No ligatures */
  font-variant-ligatures: common-ligatures; /* Common ligatures like fi, fl */
  font-variant-ligatures: no-common-ligatures; /* Disable common ligatures */
  font-variant-ligatures: discretionary-ligatures; /* Discretionary ligatures */
  font-variant-ligatures: historical-ligatures; /* Historical ligatures */
}

/* Font Feature Settings */
.font-feature-settings {
  font-feature-settings: normal; /* Default settings */
  font-feature-settings: "liga" 1; /* Enable ligatures */
  font-feature-settings: "kern" 1; /* Enable kerning */
  font-feature-settings: "smcp" 1; /* Enable small caps */
  font-feature-settings: "liga" 1, "kern" 1; /* Multiple features */
}

/* Using CSS variables for typography */
:root {
  --font-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-secondary: Georgia, serif;
  --font-size-base: 16px;
  --line-height-base: 1.5;
  --text-color: #333;
  --heading-color: #222;
}

.typography-with-vars {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-color);
}

.heading-with-vars {
  font-family: var(--font-secondary);
  color: var(--heading-color);
}

@font-face {
  font-family: 'VariableFont';
  src: url('variablefont.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

.element {
  font-family: 'VariableFont', sans-serif;
  font-weight: 650; /* Any value between 100-900 */
  font-stretch: 110%; /* Any value between 75%-125% */
}