Large Heydon Collider
Imagine if you could change the font-size of an <h1> HTML element somehow. But alas.
Mar 13, 2023 at 8:59pmWeb
Show threadnkMar 13, 2023
@heydon AAAAAAAAAAAAAAAAAAGHHHHHHHH
Show threadBjarne OldrupMar 13, 2023

@heydon Baah. Just wrap it in <small> and you'll be fine! šŸ˜„

(developer advice after 22:00 should not be taken seriously)

Show threadPaul van Buuren šŸ‰Mar 13, 2023
@heydon I like the phrase 'I did some google'. Almost like 'doing drugs'.
Show threadAdrian EggerMar 14, 2023
@paul @heydon mix some Bing in for a speedball
Show threadLeBenMar 13, 2023
@heydon what the hell
Show threadJared CunhaMar 13, 2023
@heydon Everyone knows that changing the font-size of an <h1> is a slippery slope to changing the font-size an <h2>. Won't someone think of the children?!?!?!?
Show threadDaniela KubeschMar 13, 2023
@heydon how did they Google that they didnā€™t find the answer right away?? šŸ™ˆ
Show threadaiken šŸŒˆMar 13, 2023
@dnikub @heydon don't worry, they found out it's probably good for SEO.
Show threadJeroen-bart EngelenMar 14, 2023
@dnikub @heydon I had to check it. I googled "change font-size h1" and there are tonnes of answers. The first one is an SO answer that works. I don't think this person did the right google.
Show threadLarge Heydon ColliderMar 14, 2023
@dnikub I don't think anyone on the entire Internet thought it was something they'd have to clarify!
Show threadThainMar 13, 2023
@heydon What about wraping your h1 within enougth section elements to fit your design? šŸ¤Ŗ
Show threadaiken šŸŒˆMar 13, 2023
@heydon this person is doing the right thing, though. Being a beginner, having colleagues (probably with more "experience") laughing at them and still having the courage to ask random people to find out how and why to use h1 properly. Not the best google and CSS skills, but I am sure they will get there.
Show threadEricMar 13, 2023
@heydon six figure salary
Show threadNathan KnowlerMar 14, 2023

@heydon I think you need a 120kb library called react.js (40kb gZiPpEd!!) and a css-in-js library to do this. Itā€™s a known limitation of css!!

```jsx
<Text as="h1" css={{fontSize: '$muchBigger'}}>JavaScript: OUr LoRd & sAViOuR</Text>
```

Show threadNathan KnowlerMar 14, 2023
@heydon The size limit of `<h1>` is directly correlated to how much JS you load. The more the bigger!
Show threadJames J MalcolmMar 14, 2023

@heydon
<h1> is outdated and very number-centric.
Better is to keep it alphabetically consistent and use <Ha> instead.

Added bonus: theyā€™re nest-able!

#HTMLFacts

Show threadManuel MatuzovićMar 14, 2023
@heydon That sounds like a job for the folks at Open UI. While they're at it, they could also implement a native element for clickable interactive controls, something like <btn> would be a game changer!
Show threadFlorian GeierstangerMar 14, 2023
@heydon Wrap it in a `<font>` tag would probably fix it
Show threadStu RobsonMar 14, 2023

@heydon

<h1 class=ā€œtext-3xl md:text-2xl sm:text-xlā€>Sorted (for Eā€™s & Whizz)<h1>

Show threadOllie BoermansMar 14, 2023

@heydon the best way to make a h1 smaller is to move further from the screen.

Furtherā€¦

Keep goingā€¦

Another few stepsā€¦

Nearly thereā€¦

Iā€™ll tell you when to stopā€¦

Show threadAdamMar 14, 2023
@heydon 
Show threadFabrizio CalderanMar 15, 2023

@heydon everybody knows it's really easy:

<h1><font size=3>checkmate, fixed H1 font size!!!!</font></h1>