How to use “two-toned” font variants in CSS?

Tags: html,css,html5,webfonts

Problem :

Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.

Here's some examples of fonts designed to be used this way.

I was sort of able to get this to work using CSS like this:

This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.

However, this doesn't seem ideal to me. Two problems:

  • I don't want to duplicate the text in the html.
  • I have to guesstimate the top-margin by trial and error.
  • If the text wraps, this doesn't work anymore.

Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.


Solution :

You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle:

That also solves the problem with the text wrapping.

To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)

    CSS Howto..

    How to make a 3D banner overlay (??) with CSS

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    how to change element css class runtime using javascript

    How to enforce a min-width for a page (css)

    How to style a table from horizontal layout to vertical layout with CSS

    multiselect.js via gem multi-select-rails - how best to set width

    How to not display css padding when span element is empty

    How to align text in line with icons?

    How to force IE to place two div boxes next to each other in it's browser window?

    How to add a CSS class depending on URL path?

    How to make font size independent of screen resolution and monitor size?

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    bootstrap dropdown on mouse over the menu item should show edit/delete icon on right side

    How to give multiple arguments to find element by css selector

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    How to get css height property of an object and add 20px to it?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How to change position using CSS

    How is it that CSS borders create a triangle?

    How to hide text without ID?

    How do I animate background image size on hover smoothly in css?

    How to fix responsive drop down menu using css?

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How do I code CSS to “change” when I load/pull content using ajax?

    How to keep an element :active even after clicking

    CSS Animations - How to make it stay there after animation? [closed]

    How does Grails process static files without resources plugin?

    How to change the color of first row of first table using css

    How to set button images based on browser type

    How to change css style for only one image in specific page in wordpress?