ballp.it

Snakes In The Ball Pit => Announcements => Topic started by: Lemon on January 16, 2018, 01:10:39 pm

Title: If you have opinions about typography...
Post by: Lemon on January 16, 2018, 01:10:39 pm
I just made change to the F+ CSS that I'm kind of on the fence about.

It used to be that all the text on thefpl.us went wall-to-wall) (if you're on desktop, that's from sidebar over to the right side of the screen, with text that scaled at 1.6vw (which basically means a letter is 1.6% of your monitor's width) It's an interesting look as a snapshot, but I've always felt it had some legibility issues, especially when you had a bigger block of text.

I do like the legibility of the episode summaries so I added a max width to these text sections for better vertical rhythm. You'll see the change most notably on the submit page (https://thefpl.us/submit), but it's having an effect other places as well.

Anyway, if you have an opinion one way or the other, let me know here. If not, that's totally fine. Don't be compelled to care about typography, it's not a good thing to care about.
Title: If you have opinions about typography...
Post by: chai tea latte on January 16, 2018, 01:57:08 pm
Looks okay to me, even on the submit page.
Title: If you have opinions about typography...
Post by: EYE OF ZA on January 16, 2018, 02:19:18 pm
It feels a little odd to me, which might just be because it's new, but it does feel like there's places where the text only goes to its max-width but other content--and even other text--goes beyond that. For instance, on the episode page below, the contributor text passes beyond the max width of the description. It feels a little weird on other pages too, like the merch page, where the boxes for merch fill the whole page, but the text only fills so much horizontal space.

(https://i.imgur.com/es26Lbm.png)
Title: If you have opinions about typography...
Post by: Lemon on January 16, 2018, 02:30:48 pm
Yeah, I see what you're saying. I think it might be just "new" and maybe a matter to just let rest and come back to.

That said, I did change around the HTML structure to fix the problem you screenshotted below.
Title: If you have opinions about typography...
Post by: Isfahan on January 16, 2018, 03:02:40 pm
This is off topic but I'm really proud of that episode cover btw
Title: If you have opinions about typography...
Post by: Macho Masc Sangy Savage on January 16, 2018, 04:08:21 pm
As far as the episode pages go, it doesn't feel like something that will really be noticed, unless you fullscreen your browser window on a large monitor. Even then, the album image is there to balance out the extra white space. The submit page and the merch copy really highlight the changes. On one hand, it really makes the margin on the left look really tight by comparison. On the other hand, neat blocks of text are a hell of a lot easier to read. The FPlus website isn't a place where people will be reading large blocks of text for long periods of time.

I just looked down and saw Radical Anarchy's post all stretched the fuck out in one thin line and was instinctively angry, so my vote is to keep the changes.
Title: If you have opinions about typography...
Post by: Dr. Buttplug on January 16, 2018, 11:49:53 pm
Does the line spacing and tracking scale with screen size as well? I have two screens to look at it on right now, my cellphone and the low res monitor I use at work. For some reason I can't articulate I feel like it looks better on my cellphone. Feels like the line spacing is off on the monitor maybe? It might just be that the lines are less crisp on this cheapo monitor. I'll have to check it on my nice one when I get home.
Title: If you have opinions about typography...
Post by: Lemon on January 17, 2018, 08:19:30 am
Does the line spacing and tracking scale with screen size as well?
Jackal Flapnasty, January 16, 2018, 11:49:53 pm

Hmmm, it should, but I just realized that I never explicitly gave those sections a line-height, which means they end up as browser defaults, which could change. I'm gonna play with that variable a bit today.
Title: If you have opinions about typography...
Post by: Dr. Buttplug on January 18, 2018, 04:41:31 am
If I remember correctly from typography class however many years ago, line spacing doesn't scale at the same rate as font size. Anyway I got home and took a loot at it on my 4k 27 inch monitor. It is legible but since the art is a static size the it creates this odd gap between the text and the image.
(https://nofile.io/g/roAQX4C65qLigSAKyOfGMa1Iw5zVMDKMrjMjOTgX7Zd8INeOiqF9BE0hVqynxHFA/ascii+art.JPG/p)
Title: If you have opinions about typography...
Post by: Down10 on January 22, 2018, 10:27:00 pm
I do have strong opinions on CSS and typography, but if I recall correctly, you weren't thrilled to hear them.

...

Still here? Okay!

Since desktop browsers mostly round off sliding unit values to the nearest pixel, you are going to have wild results when applying uncommon units like vw to font sizes, which will reflow the text in unexpected ways. My technique for sites these days is to stick normalize.css (http://"http://necolas.github.io/normalize.css/") at the top (for browser consistancy and to spare some headaches), create a root em unit value for the BODY element, and then assign rem units to font sizes and—well, anything else that calls for a width or height.

/* Initial base font size: 1rem == 1em == 10px */

html { font-size: 62.5%; }
body { font-size: 10px; }
html body { font-size: 1.0rem; }

body {
    font-size: 1.6rem; /* 16px */
    line-height: 1.5; /* 24px */
}

The above css will scale down 16pt browser default text to 10px, then redefine it as a single rem unit. Now every text element can be size in a metric (aka sensible) way: 1.6rem is 16px, 0.9rem is 9px, etc. The main advantage to rem is that once it's defined, it will behave predictably in nested elements* when scaling the width of the viewport or when zooming in and out with the browser. You can redefine the root em for different media or different screen widths, and not have to redefine the font size every other nested element, as long as you stick to the rem plan.

I would use vw for sizing the dimensions of DIVs and floating blocks, like you've done with the episode blocks, but not for font sizes. Browsers are still not all there yet.

Further reading: https://css-tricks.com/font-sizing-with-rem/, https://css-tricks.com/rem-global-em-local/

* That's the C in CSS, after all