Hi semicolon,
Going by that statement and this line in your html…
<h2>New California law could give you a free ride</h2>THE SACRAMENTO BEE<br />
I am assuming that you want the h2 text to run in to the text that follows.
If that is the case then there are a few ways to do it. Actually there is display:run-in; that is supposed to take care of that but it seems to still be on the back burner with browser vendors.
Hi Paul,
I would agree with you, that does look like a quote, since The Sacramento Bee is a newspaper.
In semicolon’s other thread, the rest of the content in the page appears to be about ride-sharing for drunks to get home safely. It looks like “New California Law” is about making sure that ride-sharing services are available.
You are right though, it is debatable and the h1 could probably go either way.
Perhaps semicolon could best answer that after he understands how the hierarchy of headings are intended to work.
Condensed is a font variant that narrows the font: the font’s ‘family’ remains the same; the height remains the same; but the width only is narrowed. In the better font foundaries (Linotext, Bitstream, Adobe PS, etc.) it is not uncommon to find as many as 8 levels of condensed variants of the same font. It’s easy for people who don’t work regularly with fonts to mistake SIZE for condensed. Simply sizing the font is not the same because the font’s aspect remains the same. hths
You’ve stumped me gandalf458. When I looked at this on [not allowed to mension site] it looked like someone went to work with an asphalt drum. No that is most definitely not what I had in mind. See my graphic above.
I’ll be the first to admit that I don’t work with fonts on a regular basis. I do understand the concept your explaining there with condensed fonts but I was not aware of them.
It is my understanding though that monospace font glyphs are all the same width. That is why you see more space between an [i] and an [l] compared to an [o] or a [w]
Now I can see how letter-spacing would not fix that.
Ray.H your comment is prescient. It totally confuses people how a monospaced font could be “condensed”: It’s the same size, whatever you do with it, right?
Yes. And no. The technical way to say it is:
Each condensed letter/number/glyph occupies the same horizontal space. The screenshot I posted of Lucida Console in its normal font aspect . . . and then the very same font & size, but condensed (narrower) is better for describing the difference. They are the exact same “Pitch” and height, but each monospaced character occupies the identical — now narrower — horizontal width.
Font-stretch is the way to do this. But it will only work on fonts which have the varying widths available. It cannot stretch or condense a font with only a single face.
It is unlike italics. If you use font-style: italic the browser will use the italic variant of the font if it exists, if not it will simply skew the regular font.
With stretch it will use the wider/narrower version only if it exists, if not nothing changes.
Yes that would be the correct approach but as you say depends on the font and of course on browser support which is still limited.
There is a hack you can use but has limited use unless in very controlled situations. You can use transform to shrink the width of the text but as transform doesn’t change the layout you have to hack a negative margin to accommodate the smaller style.
It may be that in a controlled situation like the header you could do this without too much ill effect.
e.g.
.condensed{
transform:scale(0.8,1);/* bit of as hack*/
transform-origin: left;
display:inline-block;
margin-right:-20%;/* bit of a hack */
}
<p> <span class="condensed">New California law could give you a free ride!</span> <q cite="https//www.etc.etc">The Sacramento Bee</q></p>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAFELY HOME</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: lucida console, monospace;
font-size: 1.2em;
}
.wrap {
max-width: 1200px;
margin: auto;
}
.heading {
display: table;
border: 10px outset #805D38;
width: 100%;
}
.image, .heading-text {
display: table-cell;
vertical-align: middle;
padding: .25em;
}
img {
display: block;
margin: auto;
}
p {
margin: .5em 0;
}
h1.intro {
font-size: 1em;
font-weight: bold;
}
.heading-text p{
margin: 0;
font-size: 1em;
}
.heading-text q {
text-transform: uppercase;
display:block;
padding-top:.2em;
}
time {
display: block;
font-size: .8em;
margin: .5em 0;
text-transform: uppercase;
}
.condensed{
transform:scale(0.8,1);/* bit of as hack*/
transform-origin: left;
display:inline-block;
margin-right:-20%;/* bit of a hack */
}
</style>
</head>
<body>
<div class="wrap">
<div class="heading">
<div class="image"> <img src="https://emojipedia-us.s3.amazonaws.com/thumbs/320/samsung/128/cocktail-glass_1f378.png" width="108" height="108" alt="hic!"> </div>
<div class="heading-text">
<h1 class="intro">Too drunk to drive?</h1>
<p> <span class="condensed">New California law could give you a free ride!</span> <q cite="https//www.etc.etc">The Sacramento Bee</q></p>
<time datetime="2017-12">December 27, 2017 9:33 AM</time>
</div>
</div>
<p>Some text that follows</p>
</div>
</body>
</html>
Generally I avoid hacks but sometimes you can get close to a desired result if that is important. I don’t see that it’s of real importance in this case as the original seems ok to me.
Where there’s a will, there’s a hack! Then another hack to patch to problem made by the hack.
Sometimes a condensed font is just a style preference, but sometimes used to shoehorn text in a tight space.
If it were important, maybe just choose a font that is condensed in nature.
Not the same thing as a condensed font, but it can be used to tighten up the kerning and make the line shorter/more words. With the font being mono-spaced the kerning is quite loose, tightening it up may work.
Gandolph’s original suggestion worked, although why it didn’t when I first tried it is a mystery. I dropped the following into the H2 header’s inline and it tightened up. Please see if this works on your compters:
<H2 style="letter-spacing: -1.8px;">New California law could give you a free ride</H2>
It isn’t lovely, but I always like using Lucida Console because almost everybody has it.
My preferred Monospaced font is a postscript font from Bitstream’s foundry called Prestige 12 PT Roman.
I have a similar thread about this little project where you can see a screenshot. The design is complete BUT I need some help with the buttons . . .
Yes, it works, but for the sake of my sanity I would always use relative units (em) for these kind of properties.
I did try it unit-less (like you should with line-height) but that doesn’t work, but I guess using em is just the same and a very safe bet.
Sam I completely take your (and others’) point. I’m glad to have learned this little guy who will (if nothing else) prove invaluable on future projects when I’m trying out different fonts. Now that I know how it can be done inline, my intention is to remove all the headers and replace them with styles.
A word or two about headers, and this < H 2 > in particular which is an offense to headers everywhere. Paul is obviously correct. This is a really bad use of headers —and— This is a reprint of a Sacramento Bee article that in any other context I would request the right to reprint and wouldn’t have the cojones to completely redesign the page.
But this document is for my own private use and will never appear in a URL unless it is local on my conputer where I tweak it in Firefox.
