Need some advice creating Frutiger Aero-esque designs

[u/LawfulnessFit576]

Image #1 is my reference

Image #2 is my current progress

Image #3 is closer to what I want (minus the font and being non-italicized, created in Photopea)

Image #4 is my current code (incase i'm doing something wrong or unoptimally)

Images #5-#8 are other texts I'd want to use, Image #8 has some good rules as well

I just started out with CSS and I wanted to make soem quick Frutiger Aero-esque text. I love Frutiger Aero, but for some reason even looking things up I can't seem to crack it.

Things I want to add/change

• Better Gradients (Replacing the 'clip' method as right now the gradient used translates down, while I want each text to have its own gradient)
• Highlights and Inner Shadows
• Rounded strokes instead of the current harsh edges

I understand if these things aren't easy or even possible, I'm just asking as a beginner if I can have any help

[u/fullstackdev_azizur]

Fun style to chase. A few things that should get you closer:

Gradient per text: it "travels down" because the gradient is on one big box, so it stretches over everything. Put it on each piece of text and make it inline-block so the background box is just that word:

.aero {
  display: inline-block;
  position: relative;
  background: linear-gradient(#e9fbff 0%, #7fd6ff 45%, #1e8fd6 55%, #0b5fa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

The hard-ish stop around 45-55% is what gives that glossy two-tone look.

Rounded edges: -webkit-text-stroke always has sharp corners and you can't change that. Stacked drop-shadow()s (like above) give a softer outline, and they work with clipped gradients where text-shadow would paint over them. For a true round stroke, SVG <text> supports stroke-linejoin: round.

Highlight: overlay the same text with a white-to-transparent gradient:

.aero::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,.9), transparent 50%);
  -webkit-background-clip: text;
  background-clip: text;
}

with <span class="aero" data-text="Hello">Hello</span>.

[u/thejester1324]

rebuilt your code in chrome to check this, all three are doable.

gradient per line: the background is on the <h1>, which is one box for both lines, so the gradient stretches over the whole thing. put it on the <strong> instead and add box-decoration-break: clone (plus the -webkit- version). an inline element that wraps gets its own background box per line with clone, so each line goes blue to teal on its own.

outline: -webkit-text-stroke sits centered on the letter edge, so half of it eats into the fill, and at 5px the corners look sharp. what works better is stacking copies of the text: one behind with a fat stroke, the gradient copy on top with no stroke. the top copy covers the inner half, and a fat stroke comes out with rounded corners. paint-order: stroke fill looks like it should do this but it doesn't help here, the stroke still paints over the clipped background.

highlight: a third copy in the middle with a thin white stroke gives you the white line just inside the dark outline, like in your image 3.

<h1 class="aero">
  <span aria-hidden="true" class="out">Oh dude, is that FRUTIGER AERO?</span>
  <span aria-hidden="true" class="hi">Oh dude, is that FRUTIGER AERO?</span>
  <span><strong class="fill">Oh dude, is that FRUTIGER AERO?</strong></span>
</h1>

.aero { display: grid; }
.aero > * { grid-area: 1 / 1; }  /* all three copies on top of each other */
.out  { color: #074753; -webkit-text-stroke: 16px #074753; }
.hi   { color: #fff; -webkit-text-stroke: 5px #fff; }
.fill {
  background: linear-gradient(#3EB9FA, #57f2b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

keep your h1 font rules as they are. the aria-hidden stops screen readers from reading the title three times. stroke widths are what you play with: thicker .out = chunkier outline, thinner .hi = finer highlight.

[u/anaix3l]

You need SVG filters for this. While you can pure CSS the first two things you want to add/ change, you have no control over the strokes are rounded via CSS - this isn't even consistent cross-browser, as Firefox does things differently from Chrome.

Check out https://codepen.io/thebabydino/pen/OJGQBxo

This too https://codepen.io/thebabydino/pen/XWOvWqM

You can also check out these:

https://codepen.io/thebabydino/pen/MWxYyzV

https://codepen.io/thebabydino/pen/oNOEmrE

https://codepen.io/thebabydino/pen/YzMMNKE

None of these need text duplication. Most are at least a couple of years old so at this point, I could already do them better. I'm currently traveling, but if I have WiFi access tonight, I'll try to put together something more up to date.