Jump to content
gotsowell

Layering a font behind a different font

Recommended Posts

I'm trying to reproduce the quotation design in the screenshot using all CSS. It's to become part of the hero with the image to its right. The oversized curly quotes need to layer behind the actual quotation.

I just can't seem to figure out

  • the parent vs child elements
  • which to make relative vs absolute
  • and how to make z-index work
  • how to ensure all elements resize together in responsive design.

Can someone help me out here? Yes, I did the positioning tutorial before creating this topic. Thanks in advance.

Screen Shot 2018-06-13 at 5.58.58 PM.png

Share this post


Link to post
Share on other sites

You should analyze the code on that website to see how they did it. There isn't one single solution to this, there are many ways to do it.

What I would probably do is use the ::before and ::after pseudo-elements to create the quotes, then give them an absolute position relative to the box that contains them. You could also choose to not use absolute positioning, keep them in place but scale them up right where they are with the transform property and put them in the background with a negative z-index.

  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks, I'll give it a go. My CSS is a little rusty. The site with this layout uses a jpg of curly quotes and positions the text over the img. The work was done in xhtml 1.0, so it's not much help.

 

Share this post


Link to post
Share on other sites

I have tried the set up the second option you gave. The way I'm using transform:scaleY(1.5) below doesn't increase the curly quote size.  Z-index is working, though. The class is on a span within a block element. What am I doing wrong?

The set up below

<!DOCTYPE html>
<html>
<head>
<style> 

div.c {
    font-family: arial;
    font-size: 28px;
    color: green;
}
span.d {
    
    font-family: serif;
    line-height: 10px;
    color: gray;
    transform: scaleY(1.5);
    z-index: -30;
    margin: -8px;
}

</style>
</head>
<body>
<h1>The transform Property</h1>


<h2>transform: scaleY(1.5):</h2>
<div class="c"><span class="d">&#8220;</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>

</body>
</html>

Share this post


Link to post
Share on other sites

Big thanks! I added the quotes property below to get curly quotes. I couldn't seem to get curly quotes, even though I'd declared serif, without using that property. My only remaining issue is that the open quote appears reversed. Is there a way to flip it to display in the usual way? I've searched whatever CSS properties I could think of but don't see something that applies to a single character. Any ideas?

Latest iteration:

https://www.w3schools.com/code/tryit.asp?filename=FSAUWRQ6OY5M

div {
    quotes:'”' '„';
}

Share this post


Link to post
Share on other sites

The quotes look right to me, but perhaps you don't like how the font renders the curly quotes. You can flip things by using a negative value in the scale property:

/* To flip horizontally */
transform: scaleX(-10.5) scaleY(10.5);

/* To flip vertically */
transform: scaleX(10.5) scaleY(-10.5);

Each of your quotes is in its own pseudo-element, so you can put the scale code in the selector the the specific quote that you want to flip.

  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×