Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Word Spacing

The word-spacing property in CSS controls the amount of space between words in a text. Similar to letter-spacing, it can be increased or decreased to adjust the flow and readability of text content.

Example 1: Increasing Word Spacing

/* This rule targets paragraphs with the class "wide-word-spacing" */
.wide-word-spacing {
  word-spacing: 10px; /* Adds 10 pixels of space between each word */
}

Explanation: By setting word-spacing to a positive value like 10px, you can increase the gap between words. This can be used for stylistic emphasis or to spread out text to fill a specific width.

Example 2: Decreasing Word Spacing

/* This CSS rule applies to elements with the class "narrow-word-spacing" */
.narrow-word-spacing {
  word-spacing: -3px; /* Removes 3 pixels of space from the default spacing between words */
}

Explanation: A negative word-spacing value reduces the space between words, bringing them closer together. This can be used to create more compact lines of text, but should be used cautiously to avoid harming readability.

Example 3: Normal Word Spacing

/* This rule is for elements with the class "normal-word-spacing" */
.normal-word-spacing {
  word-spacing: normal; /* Resets the word spacing to the font's default */
}

Explanation: The word-spacing: normal; declaration sets the space between words back to the default value provided by the current font. This is the standard setting and is useful for overriding inherited word-spacing values.

Example 4: Using em Units for Word Spacing

/* This rule targets elements with the class "em-word-spacing" */
.em-word-spacing {
  word-spacing: 0.5em; /* Sets the space between words to half the font size */
}

Explanation: Using em units for word-spacing creates a responsive gap between words that scales with the font-size. This helps maintain a consistent visual rhythm in the text across different sizes.

Example 5: Applying Word Spacing to Justified Text

/* This CSS rule is for paragraphs with justified alignment and adjusted word spacing */
.justified-text-spacing {
  text-align: justify; /* Justifies the text */
  word-spacing: 2px; /* Adds a minimum of 2px of space between words */
}

Explanation: When text is justified, the browser automatically adjusts the spacing between words to align the edges of the text. The word-spacing property can influence this behavior by setting a baseline for the spacing.

Example 6: Animating Word Spacing on Hover

/* This rule applies to elements with the class "hover-word-spacing" */
.hover-word-spacing {
  word-spacing: 2px; /* Initial word spacing */
  transition: word-spacing 0.4s ease-in-out; /* Smooth transition for the spacing change */
}

.hover-word-spacing:hover {
  word-spacing: 8px; /* Increases spacing on hover */
}

Explanation: This example creates an interactive effect where the space between words expands when a user hovers over the text. The transition property is used to create a smooth and visually appealing animation.

Example 7: Combining Word and Letter Spacing

/* This rule targets elements with the class "combined-spacing" */
.combined-spacing {
  letter-spacing: 2px; /* Increases space between letters */
  word-spacing: 5px; /* Increases space between words */
  text-transform: uppercase; /* Transforms text to uppercase */
}

Explanation: letter-spacing and word-spacing can be used together to achieve a specific typographic style. In this example, both properties are increased, and the text is made uppercase to create a highly stylized, impactful heading.