Welcome, Guest. Please login or register.
March 28, 2024, 06:55:20 pm

ballp.it is the community forum for The F Plus.

You're only seeing part of the forum conversation. To see more, register for an account. This will give you read-only access to nearly all the forums.

Topic: If you have opinions about typography...  (Read 6047 times)

Lemon

  • Whatever happened to Freedom of Speech?
  • Administrator
  • ...IT'S NOW THE MASH!
  • 4,127
  • 421
If you have opinions about typography...
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, 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.

chai tea latte

  • TheftBot is, simply put, a fully sentient robot for stealing automatic teller machines
  • Paid
  • (ATMs) from nearby convenience stores.
  • 5,773
  • -420
If you have opinions about typography... #1
Looks okay to me, even on the submit page.

EYE OF ZA

  • some people's reactions such as the fuck,the hell,wtf, or what the hell
  • Paid
  • I have a problem and then I have another problem
    • 2,572
    • 162
If you have opinions about typography... #2
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.

Lemon

  • Whatever happened to Freedom of Speech?
  • Administrator
  • ...IT'S NOW THE MASH!
  • 4,127
  • 421
If you have opinions about typography... #3
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.

Isfahan

  • Ask me about AKs.
  • Ridiculist
  • Trouble with customers? Isfahano cares.
    • 3,728
    • 68
If you have opinions about typography... #4
This is off topic but I'm really proud of that episode cover btw
Macho Masc Sangy Savage Lemon RoeCocoa A Meat Corn Syrup Baldr

Macho Masc Sangy Savage

  • Beep Beep Imma Dwarf Jeep
  • Paid
  • 🍕 Pizza Philosopher 🍕
  • 3,984
  • 423
If you have opinions about typography... #5
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.

Dr. Buttplug

  • Formerly Jackal Flapnasty
  • Paid
  • Legendary Jizz-Wailer
  • 2,143
  • -13
If you have opinions about typography... #6
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.

Lemon

  • Whatever happened to Freedom of Speech?
  • Administrator
  • ...IT'S NOW THE MASH!
  • 4,127
  • 421
If you have opinions about typography... #7
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.

Dr. Buttplug

  • Formerly Jackal Flapnasty
  • Paid
  • Legendary Jizz-Wailer
  • 2,143
  • -13
If you have opinions about typography... #8
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.

Down10

  • Square Pusher
  • Paid
  • 298
  • -51092
If you have opinions about typography... #9
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 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
« Last Edit: January 22, 2018, 10:44:48 pm by Down10 »