Typography & Font Customization – Oxilab – Premium WordPress Plugins

Typography plays a huge role in how your hover effects look and feel. Image Hover Effects Ultimate gives you fine-grained control over every text element — headings, descriptions, and buttons — letting you create hover effects that match your brand perfectly. Here’s everything you need to know about the font and text settings.

Text Elements You Can Style

Most hover effect types include up to three text elements, each with independent styling:

Heading / Title — The main text shown on hover (e.g., project name, product title)
Description — Supporting text below the heading (e.g., category, short info)
Button text — Label on call-to-action buttons (e.g., “View More”, “Buy Now”)

Font Family

You can set a different font family for the heading and description independently.

System / Web-Safe Fonts (Free)

Default font options include standard web-safe fonts that work without loading any external resources:

Arial, Helvetica, sans-serif
Georgia, serif
Verdana, Geneva, sans-serif
Trebuchet MS, sans-serif
Courier New, monospace

Google Fonts (Pro)

With Google Font Support enabled in settings, a font picker appears with 650+ Google Fonts. To enable:

Go to Image Hover Ultimate → Settings
Set Google Font Support to Yes
Save changes

The font picker lets you search by name. Popular choices for hover effects: Montserrat (headings), Open Sans or Lato (descriptions).

Font Weight

Font weight controls how bold the text appears. Common values:

300 — Light, elegant look
400 — Normal (default)
600 — Semi-bold
700 — Bold
900 — Extra bold / Black

Note: Not all Google Fonts support every weight. Check the font’s available weights on fonts.google.com before setting a weight.

Font Color

Set the color of heading text and description text independently using the color picker.

Tips for readable text on hover overlays:

✅ White (#ffffff) on dark overlays — always readable
✅ Light gray (#f0f0f0) on dark overlays — slightly softer than pure white
✅ Dark (#333333) on light/transparent overlays
❌ Avoid mid-tones (grays like #888) — poor contrast on most backgrounds

In the Pro version, you have access to unlimited custom colors via a full color picker, including RGBA (with transparency).

Text Alignment

Control how text aligns within the hover overlay:

Left — Casual, editorial feel
Center — Formal, symmetric — works best for square effects and flip boxes
Right — Less common, useful for specific RTL or design-driven layouts

Content Position

Beyond alignment, you can control where the text block sits within the overlay using 9 position options:

Top Left | Top Center | Top Right
Middle Left | Middle Center | Middle Right
Bottom Left | Bottom Center | Bottom Right

Middle Center is the most common for symmetrical designs. Bottom Left or Bottom Center works well for caption-style effects where text appears to “rise” from the bottom.

Line Spacing (Line Height)

Line spacing controls the vertical space between lines of text in the description. A line height of 1.4–1.6 is typically readable and comfortable. Too tight (below 1.2) makes text feel cramped; too loose (above 2.0) makes paragraphs feel disconnected.

Text Decoration — Underline

You can optionally add an underline to heading text — useful for hover effects where the title acts as a clickable link indicator.

Common Typography Mistakes to Avoid

❌ Too many different fonts — Stick to 2 fonts max (one for heading, one for description). More than that looks chaotic.
❌ Font weight not supported — If your text looks odd at a specific weight, the font may not support it. Try 400 or 700 instead.
❌ Heading and description the same size — Always make the heading larger for clear visual hierarchy.
❌ Low contrast text — Always check that your text color contrasts well with the overlay background. Use a contrast checker tool if unsure.