When setting up a new website, many developers start by adjusting the base font size in
their CSS using html { font-size: 62.5% }
. This changes the default font
size from 16px to 10px, making it easier to reason about rem
values, which
allow users to scale the font size according to their preferences. This approach works
well on desktop browsers and Android devices, but unfortunately, it doesn’t work on iOS
and iPadOS.
Apple handles dynamic font scaling differently by using system fonts like
-apple-system-body
and -apple-system-headline
. The challenge
is that none of these fonts map directly to 10px. For example, I typically use
-apple-system-body
as the base font, which defaults to 17px, requiring
additional calculations. To complicate things further, desktop Safari supports these
system fonts but renders them at smaller sizes than expected, so it’s often better to
revert to a more traditional method here.
Here’s an example of a better font setup:
html {
font-size: calc(100% * 17 / 16);
@supports (font: -apple-system-body) and
(-webkit-touch-callout: default) {
font: -apple-system-body;
}
}
:root {
--font-size-100: calc(20rem / 17);
--font-size-200: calc(25rem / 17);
--font-size-300: calc(30rem / 17);
...
}
By using this CSS, you can use the font variables and they will scale perfectly and
adapt to the user’s preferred font size. It’s a great way to ensure a consistent and
flexible typography experience across devices.
My first year as a freelancer was, without a doubt, the best year of my professional
life. However, as I reflect on year two, it turned out to be the absolute worst.
Freelancers often talk about all the benefits, but freelancing isn’t for everyone. To
be honest, I’m not sure it’s really for me.
Let me tell you more as I review my second year.
Read article
One thing that always gets me excited and inspired is attending conferences, and one of
my absolute favorites is CSS Day in Amsterdam. This year’s conference was no exception.
It’s hard to summarize two jam-packed days of talks, so instead, I decided to share a
fantastic summary written by my travel friend.
goodvibeson.ly
Reflections after CSS DAY 2024
This week, I attended CSS DAY Conference in Amsterdam for the second time. Last year,
there were so many new things on the CSS agenda that I went home feeling both inspired
and humbled. This year, I wasn’t sure what to expect.
Almost two years ago, I decided to leave my steady paycheck and become a freelancer. The
primary motivation for this was to be free to choose how I spend my time and what I want
to work on. Now, it’s time to use that freedom.
Starting today, I will dedicate half of my time to my own projects. I’ve always worked
on side projects and wondered how far I could take them if given the time they deserved.
I doubt this will make me rich (probably the other way around), but I hope it will
result in something I can be proud of and call my own. That’s the dream!
As I get closer to a release, I will write more about what I’m building.
Last week, I spoke at Jfokus again for the first time in
ten years. But this time was different; I shared the experience with the awesome
Jessica Skårbratt, which made it way more fun. Our
talk was about Server-Driven UI and how it can empower teams to communicate better to
build great software.
The talk went well and triggered some very interesting conversations. There were
probably things we could have done better, but we got our message out there, which is
what matters. Most people can’t be Una Kravets or Dan North out of the gate, but they
often have something to share, and we hope our talk inspires someone.
Thanks to everyone who attended, and thanks to Jfokus for having us. It was so much fun,
and we hope to speak together again soon.
It has been a crazy year where I’ve spent most of my time awake thinking about software
architecture and how we should solve our current project in the best possible way. Now,
we’ve done our part; six senior architects have dissected our proposed solution, and it
looks like it passed.
This means we can only wait and hope our project gets a thumbs-up. It’s time to relax
and try to find new energy.
This is how I do it. What do you do to stay motivated?
In part 1 and part 2 of my Server-Driven UI series, I’ve described why you should care
and how to create a server that implements the business logic and defines the views to
render. Now comes the fun part: it’s time to create iOS and web apps that render these
views.
Read article
A couple of days back, I introduced the idea of Server-Driven UI. In this post, I’ll
show you how we use TSX to create the server part. I have to admit, this feels
strange. But if you follow along, I believe I can convince you that it’s actually not.
Keep your mind open, and I’ll show you something special.
Read article
Thanks to the React Meetup for letting
Jessica Skårbratt and me speak
about Server-Driven UI today. It was so much fun.
meetup.com
Inferno! | ReactJS Göteborg
Todays agenda: “From Technical Debt to Technical Health” with Mikael Vesavuori and
“Server-Driven UI using React-ish” by Jessica Skårbratt and Joakim Kemeny
I love building apps, especially native apps, where I can integrate with the platform
and create fantastic experiences for those who use them. As a consultant, my clients
often have different goals. They want the apps to be cross-platform, look the same
everywhere, be fast to develop, and often only exist to support other parts of the
business.
Can these two worlds be combined? In my recent project, we decided to try. In a series
of posts, I will explain our approach.
Read article
On my way back from SmashingConf Design & UX in Antwerp. I don’t consider myself a
designer, even though I design a lot of stuff, but it’s always fun to broaden your
perspectives, and I sure learned a lot.
I’m so thankful that
Jessica Skårbratt and I got the
opportunity to speak about Server-Driven UI at today’s FrontendForum. It’s been a while
since I last spoke at a meetup or conference, and as it turns out, I’ve really missed
it.
Thank you to everyone who attended.
One year ago today, I quit my job and began my journey as a freelancing front-end
developer. I didn’t know what to expect, so it’s hard to grade my year, but life as a
freelancer is pretty great. It’s time to review my year.
Read article
One of my favorite talks at
#CSSDay was
Sophie Koonin’s talk about the joy of personal
websites. It truly inspired me. Apparently, it inspired my wonderful friend
Jessica Skårbratt as well as she
released her new shiny website today.
I’m so happy for her – congratulations!
goodvibeson.ly
Home | Good Vibes Only
Welcome to my playground! This is where I gather stuff I’ve experimented with and
thoughts I want to share. With a love for color och playfulness.
I couldn’t stop myself. After
#CSSDay I had to play with my website.
So if you are running Chrome Canary with the flags
Experimental Web Platform features
and
viewTranstion API for navigations
enabled, my micro-posts now animate in
the timeline as it scrolls, and articles animate into view when clicked.
Why? Because it’s fun!
I’ve been writing CSS ever since its introduction in 1996. I thought I was keeping up,
but after two days at #CSSDay in
Amsterdam, I realize I know nothing! CSS has changed completely in the last three years,
and it’s awesome!
Web development is so much fun, and I’m so excited to re-discover this new world.
In the first article of my web development series, I described how to create the
initial pages of a blog using 11ty. With the simple pages wrapped up, it’s time to
turn up the complexity a bit. An actual blog needs an index and maybe an archive page,
so in the second part of my series, I’ll focus on that and show some tips and tricks
along the way.
Read article
On my way back from my first in-person conference since 2019. Damn, I missed
conferences, and @nordicjs sure did deliver.
Lots of impressions and ideas to try, but I’m also a bit scared after the
node_modules
talk. Really looking forward to my next conference.
Ok, I admit. I have a thing for static site generators. It started with Jekyll; after
that, Gatsby was my weapon of choice for a while. But new tools keep popping up every
month, and my new favorite, without a doubt, is 11ty.
In the first article of my web development in 2022 series, I will show how I use 11ty
to create this site.
Read article
Rebuilding my website really made me appreciate how much goes into building a website in
2022. HTML and CSS aren’t enough! You need open graph metadata, security headers,
accessibility…
So I decided to write a series on this topic. The first article will go live tomorrow.
This was the perfect ending of a perfect day. Thank you, everyone, for your support and
kind words. Now it’s time to get to work.
Today marks a special day in my life. Today I celebrate my first day as a freelance
developer! After being an employee for 20 years, I now work for myself, and it’s both
really exciting and absolutely terrifying.
Read article
I don’t know why, but for some reason, I just stopped writing here. Maybe it had
something to do with staying at home for the last two years, but it is a shame, and it’s
all about to change.
Exciting things are in the works, and I’m thrilled to share them with the world.
I didn’t expect to hear about my small home village Bäckhammar in an AWS keynote but
hey, why not. They are not building a data center there yet though, they are starting
with a wind park but you never know…
For the first time in many years my list of things I have to/need to do is empty. Now
it’s time to start working on something new that I really want to do. This is going to
be fun.
Thanks to the awesome WebKit team, who implemented support for the
prefers-color-scheme
media query, this will soon go live on
kits.se.
Going through 1Password to delete as many accounts that I can tonight. Turns out I have
a lot of accounts that I don’t get any value from; some that I actually pay for.
Biggest service so far, Facebook. I think I’ll be ok though, my account has been
deactivated for years.
Day one of #SoftwareFaster with
@tastapod done. Really happy so far and
a lot of ideas and thoughts are spinning around in my head. It will be interesting to
see how we can apply this in my team.
Back to work after a really great summer. Time to add some polish to this banking web
app to get it ready for production.
This is definitely a strange tradition but it always marks the start of our month long
summer vacation so it’s one of the highlights of the year. Happy summer!
Every year Apple invites the community to their Worldwide Developers Conference and
even though 6 000 developer gets to go every year it’s really hard to get a ticket.
For me it took six attempts but I finally got one and it was worth the wait.
Read article
After seeing Clam chowder in every WWDC demo I had to try it. I would not add it as a
Siri Shortcut though.
Good bye WWDC18. It’s been such a great week and I’ve met so many great people. I’ll try
to collect my impressions in a blog post later but right now I’m just hoping I’ll get a
ticket next year because this was really awesome.
Yes, I promise, I’m at a developer conference! I’m just having way more fun at the
WWDC18 Bash than I ever thought I would and Panic! At the Disco was really good.
The Relay FM Live show today was so good.
@ismh and
@imyke really know how to put on a great show,
hope to see you next year.