Font Size
| Class | Properties |
|---|---|
| gl-text-100 | font-size: var(--gl-font-size-100); /* 0.75rem = 12px */ |
| gl-text-200 | font-size: var(--gl-font-size-200); /* 0.8125rem = 13px */ |
| gl-text-300 | font-size: var(--gl-font-size-300); /* 0.875rem = 14px */ |
| gl-text-400 | font-size: var(--gl-font-size-400); /* 1rem = 16px */ |
| gl-text-500 | font-size: var(--gl-font-size-500); /* clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) */ |
| gl-text-600 | font-size: var(--gl-font-size-600); /* clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) */ |
| gl-text-700 | font-size: var(--gl-font-size-700); /* clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) */ |
| gl-text-800 | font-size: var(--gl-font-size-800); /* clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) */ |
| gl-text-xs | font-size: var(--gl-font-size-xs); /* 0.625rem = 10px */ |
| gl-text-sm | font-size: var(--gl-font-size-sm); /* 0.75rem = 12px */ |
| gl-text-md | font-size: var(--gl-font-size-md); /* 0.875rem = 14px */ |
| gl-text-lg | font-size: var(--gl-font-size-lg); /* 1rem = 16px */ |
| gl-text-100-fixed | font-size: var(--gl-font-size-100-fixed); /* 0.75rem = 12px */ |
| gl-text-200-fixed | font-size: var(--gl-font-size-200-fixed); /* 0.8125rem = 13px */ |
| gl-text-300-fixed | font-size: var(--gl-font-size-300-fixed); /* 0.875rem = 14px */ |
| gl-text-400-fixed | font-size: var(--gl-font-size-400-fixed); /* 1rem = 16px */ |
| gl-text-500-fixed | font-size: var(--gl-font-size-500-fixed); /* 1.125rem = 18px */ |
| gl-text-600-fixed | font-size: var(--gl-font-size-600-fixed); /* 1.3125rem = 21px */ |
| gl-text-700-fixed | font-size: var(--gl-font-size-700-fixed); /* 1.5rem = 24px */ |
| gl-text-800-fixed | font-size: var(--gl-font-size-800-fixed); /* 1.75rem = 28px */ |
| gl-text-base | font-size: var(--gl-font-size-base); /* 0.875rem = 14px */ |
| gl-text-size-h-display | font-size: 1.75rem; /* 28px */ |
| gl-text-size-h1 | font-size: 1.4375rem; /* 23px */ |
| gl-text-size-h2 | font-size: 1.1875rem; /* 19px */ |
| gl-text-size-h1-xl | font-size: 2rem; /* 32px */ |
| gl-text-size-h2-xl | font-size: 1.4375rem; /* 23px */ |
| gl-text-size-reset | font-size: inherit; |
| gl-heading-1 | font-weight: var(--gl-heading-1-font-weight); /* 600 */ margin-top: var(--gl-heading-1-margin-top); /* 0px */ font-size: var(--gl-heading-1-font-size); /* clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) */ letter-spacing: var(--gl-heading-1-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-1-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-1-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-1-color); /* #18171d */ |
| gl-heading-2 | font-weight: var(--gl-heading-2-font-weight); /* 600 */ margin-top: var(--gl-heading-2-margin-top); /* 0px */ font-size: var(--gl-heading-2-font-size); /* clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) */ letter-spacing: var(--gl-heading-2-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-2-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-2-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-2-color); /* #18171d */ |
| gl-heading-3 | font-weight: var(--gl-heading-3-font-weight); /* 600 */ margin-top: var(--gl-heading-3-margin-top); /* 0px */ font-size: var(--gl-heading-3-font-size); /* clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) */ letter-spacing: var(--gl-heading-3-letter-spacing); /* inherit */ line-height: var(--gl-heading-3-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-3-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-3-color); /* #18171d */ |
| gl-heading-4 | font-weight: var(--gl-heading-4-font-weight); /* 600 */ margin-top: var(--gl-heading-4-margin-top); /* 0px */ font-size: var(--gl-heading-4-font-size); /* 1rem = 16px */ letter-spacing: var(--gl-heading-4-letter-spacing); /* inherit */ line-height: var(--gl-heading-4-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-4-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-4-color); /* #18171d */ |
| gl-heading-5 | font-weight: var(--gl-heading-5-font-weight); /* 600 */ margin-top: var(--gl-heading-5-margin-top); /* 0px */ font-size: var(--gl-heading-5-font-size); /* 0.875rem = 14px */ letter-spacing: var(--gl-heading-5-letter-spacing); /* inherit */ line-height: var(--gl-heading-5-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-5-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-5-color); /* #18171d */ |
| gl-heading-6 | font-weight: var(--gl-heading-6-font-weight); /* 600 */ margin-top: var(--gl-heading-6-margin-top); /* 0px */ font-size: var(--gl-heading-6-font-size); /* 0.8125rem = 13px */ letter-spacing: var(--gl-heading-6-letter-spacing); /* inherit */ line-height: var(--gl-heading-6-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-6-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-6-color); /* #18171d */ |
| gl-heading-scale-100 | font-weight: var(--gl-heading-scale-100-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-100-margin-top); /* 0px */ font-size: var(--gl-heading-scale-100-font-size); /* 0.75rem = 12px */ letter-spacing: var(--gl-heading-scale-100-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-100-line-height); /* 1.25 */ color: var(--gl-heading-scale-100-color); /* #18171d */ |
| gl-heading-scale-200 | font-weight: var(--gl-heading-scale-200-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-200-margin-top); /* 0px */ font-size: var(--gl-heading-scale-200-font-size); /* 0.8125rem = 13px */ letter-spacing: var(--gl-heading-scale-200-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-200-line-height); /* 1.25 */ color: var(--gl-heading-scale-200-color); /* #18171d */ |
| gl-heading-scale-300 | font-weight: var(--gl-heading-scale-300-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-300-margin-top); /* 0px */ font-size: var(--gl-heading-scale-300-font-size); /* 0.875rem = 14px */ letter-spacing: var(--gl-heading-scale-300-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-300-line-height); /* 1.25 */ color: var(--gl-heading-scale-300-color); /* #18171d */ |
| gl-heading-scale-400 | font-weight: var(--gl-heading-scale-400-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-400-margin-top); /* 0px */ font-size: var(--gl-heading-scale-400-font-size); /* 1rem = 16px */ letter-spacing: var(--gl-heading-scale-400-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-400-line-height); /* 1.25 */ color: var(--gl-heading-scale-400-color); /* #18171d */ |
| gl-heading-scale-500 | font-weight: var(--gl-heading-scale-500-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-500-margin-top); /* 0px */ font-size: var(--gl-heading-scale-500-font-size); /* clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem) */ letter-spacing: var(--gl-heading-scale-500-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-500-line-height); /* 1.25 */ color: var(--gl-heading-scale-500-color); /* #18171d */ |
| gl-heading-scale-600 | font-weight: var(--gl-heading-scale-600-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-600-margin-top); /* 0px */ font-size: var(--gl-heading-scale-600-font-size); /* clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem) */ letter-spacing: var(--gl-heading-scale-600-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-600-line-height); /* 1.25 */ color: var(--gl-heading-scale-600-color); /* #18171d */ |
| gl-heading-scale-700 | font-weight: var(--gl-heading-scale-700-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-700-margin-top); /* 0px */ font-size: var(--gl-heading-scale-700-font-size); /* clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem) */ letter-spacing: var(--gl-heading-scale-700-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-700-line-height); /* 1.25 */ color: var(--gl-heading-scale-700-color); /* #18171d */ |
| gl-heading-scale-800 | font-weight: var(--gl-heading-scale-800-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-800-margin-top); /* 0px */ font-size: var(--gl-heading-scale-800-font-size); /* clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) */ letter-spacing: var(--gl-heading-scale-800-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-800-line-height); /* 1.125 */ color: var(--gl-heading-scale-800-color); /* #18171d */ |
| gl-heading-scale-100-fixed | font-weight: var(--gl-heading-scale-100-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-100-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-100-fixed-font-size); /* 0.75rem = 12px */ letter-spacing: var(--gl-heading-scale-100-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-100-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-100-fixed-color); /* #18171d */ |
| gl-heading-scale-200-fixed | font-weight: var(--gl-heading-scale-200-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-200-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-200-fixed-font-size); /* 0.8125rem = 13px */ letter-spacing: var(--gl-heading-scale-200-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-200-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-200-fixed-color); /* #18171d */ |
| gl-heading-scale-300-fixed | font-weight: var(--gl-heading-scale-300-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-300-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-300-fixed-font-size); /* 0.875rem = 14px */ letter-spacing: var(--gl-heading-scale-300-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-300-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-300-fixed-color); /* #18171d */ |
| gl-heading-scale-400-fixed | font-weight: var(--gl-heading-scale-400-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-400-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-400-fixed-font-size); /* 1rem = 16px */ letter-spacing: var(--gl-heading-scale-400-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-400-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-400-fixed-color); /* #18171d */ |
| gl-heading-scale-500-fixed | font-weight: var(--gl-heading-scale-500-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-500-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-500-fixed-font-size); /* 1.125rem = 18px */ letter-spacing: var(--gl-heading-scale-500-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-scale-500-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-500-fixed-color); /* #18171d */ |
| gl-heading-scale-600-fixed | font-weight: var(--gl-heading-scale-600-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-600-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-600-fixed-font-size); /* 1.3125rem = 21px */ letter-spacing: var(--gl-heading-scale-600-fixed-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-600-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-600-fixed-color); /* #18171d */ |
| gl-heading-scale-700-fixed | font-weight: var(--gl-heading-scale-700-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-700-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-700-fixed-font-size); /* 1.5rem = 24px */ letter-spacing: var(--gl-heading-scale-700-fixed-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-700-fixed-line-height); /* 1.25 */ color: var(--gl-heading-scale-700-fixed-color); /* #18171d */ |
| gl-heading-scale-800-fixed | font-weight: var(--gl-heading-scale-800-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-scale-800-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-scale-800-fixed-font-size); /* 1.75rem = 28px */ letter-spacing: var(--gl-heading-scale-800-fixed-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-scale-800-fixed-line-height); /* 1.125 */ color: var(--gl-heading-scale-800-fixed-color); /* #18171d */ |
| gl-heading-display | font-weight: var(--gl-heading-display-font-weight); /* 600 */ margin-top: var(--gl-heading-display-margin-top); /* 0px */ font-size: var(--gl-heading-display-font-size); /* clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem) */ letter-spacing: var(--gl-heading-display-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-display-line-height); /* 1.125 */ margin-bottom: var(--gl-heading-display-margin-bottom); /* 1.5rem = 24px */ color: var(--gl-heading-display-color); /* #18171d */ |
| gl-heading-1-fixed | font-weight: var(--gl-heading-1-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-1-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-1-fixed-font-size); /* 1.5rem = 24px */ letter-spacing: var(--gl-heading-1-fixed-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-1-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-1-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-1-fixed-color); /* #18171d */ |
| gl-heading-2-fixed | font-weight: var(--gl-heading-2-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-2-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-2-fixed-font-size); /* 1.3125rem = 21px */ letter-spacing: var(--gl-heading-2-fixed-letter-spacing); /* -0.01em */ line-height: var(--gl-heading-2-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-2-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-2-fixed-color); /* #18171d */ |
| gl-heading-3-fixed | font-weight: var(--gl-heading-3-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-3-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-3-fixed-font-size); /* 1.125rem = 18px */ letter-spacing: var(--gl-heading-3-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-3-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-3-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-3-fixed-color); /* #18171d */ |
| gl-heading-4-fixed | font-weight: var(--gl-heading-4-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-4-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-4-fixed-font-size); /* 1rem = 16px */ letter-spacing: var(--gl-heading-4-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-4-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-4-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-4-fixed-color); /* #18171d */ |
| gl-heading-5-fixed | font-weight: var(--gl-heading-5-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-5-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-5-fixed-font-size); /* 0.875rem = 14px */ letter-spacing: var(--gl-heading-5-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-5-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-5-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-5-fixed-color); /* #18171d */ |
| gl-heading-6-fixed | font-weight: var(--gl-heading-6-fixed-font-weight); /* 600 */ margin-top: var(--gl-heading-6-fixed-margin-top); /* 0px */ font-size: var(--gl-heading-6-fixed-font-size); /* 0.8125rem = 13px */ letter-spacing: var(--gl-heading-6-fixed-letter-spacing); /* inherit */ line-height: var(--gl-heading-6-fixed-line-height); /* 1.25 */ margin-bottom: var(--gl-heading-6-fixed-margin-bottom); /* 1rem = 16px */ color: var(--gl-heading-6-fixed-color); /* #18171d */ |