Rather than target specific components, how can I set the base font size for my whole app?
Is there something like an --ion-base-font-size variable?
I don’t think there is because there is not just one font size for the entire framework. Each element has a default font size diferente than others based on the platform.
If I wanted to achieve this I would probably inspect some elements to see the font size ionic uses for elements x, y, z and replace those values globally
Yeah, that’s honestly kind of nuts in my opinion. In actuality the base font size should be configured on the device, like many other properties in ionic. Having to individually override every necessary element to adjust it is crazy.
To my understanding h1 through h6 are all hardcoded in the typography.css file. Where is the base font size set?
I don’t think you understand the concept behind tools(and frameworks) such as Ionic. Every single one of those uses this concept of a global styling, and every one of them allow you to override those values easily(in case of Ionic the global.scss file).
The point of using Ionic or some framework/library is to simplify your development process by pre defining a lot of things, that is the basic concept behind custom web components which is a key element of Ionic. And if you think about that the very own HTML pre defines things like font size, which are later override by you to meet your demands.
But to answer your question: I don’t really know what file exactly Ionic uses to configure typography although I’m pretty sure it’s in @ionic/something in the node_modules folder. But you don’t need to(and shouldn’t) change those files. Instead do this:
Create a my-typography.scss file in the theme folder
Import that file in the global.scss file after all the default imports:
...
@import "./themes/my-typography.scss"
Override the values you want in the my-typography.scss and the changes will reflect in the entire app unless you override it in the component’s own css file.
Remember that some custom components has a variable to define some values. For instance the background of an ion-item has to be set in CSS like this:
ion-item.my-class {
--background: #fff;
}
Note the --background instead of the regular background.
If you want to change the font size for all components in the entire app(and I do not recommend doing it) you can add this to your my-typography.scss:
// This is shitty code
* {
font-size: 12px;
--font-size: 12px;
}
Happy coding
Oh, I definitely understand how frameworks work, and in comparison to others Ionic is severely lacking here.
For instance, in Bootstrap we’re provided $font-family-base , $font-size-base , and $line-height-base, all of which are set on *<body>* for universal styling.
Angular Material provides base font configuration in the form of $body-1, which can be included in your own typography custom configuration and included in your custom theming as such:
$custom-typography: mat-typography-config(
$font-family: 'Roboto, monospace',
$body-1: mat-typography-level(16px, 24px, 500)
);
@include mat-base-typography($custom-typography);
Even Flutter, which is based on Material provides access to this same $body-1 style.
What I’m asking for is entirely sane. Just because Ionic hasn’t thought of it doesn’t make it out of left field. I definitely do appreciate your advice here, but using the * selector is a sledgehammer that is much different than the examples I’m giving for the other frameworks which let you target a base font size (like for <body> or <p>) while not impacting specifically defined areas.
Well, maybe then install Angular Material in your project?
I don’t have any problem changing size of things when I need to, in fact I think is better this way, imagine you want to change the font-size of only say h1, when using a base font-size you change all the way through h6 unles you do it locally. But then again you could’ve done the same using Ionic.
But here is another thing you can do:
In your global.scss comment @import "~@ionic/angular/css/typography.css"; import your own typography file. Or, if you think that is too much install Ang. Material e use its typography
Thanks for the ideas. I’ll toy around with it some more and see what works the best. I’m growingly frustrated with ionic’s choices to “go it their own way” when it comes to developer ergonomics on so many things. The transition from other frameworks is not natural, and the advantages to ditching convention are not yet clear to me.
The predominant pattern within CSS/design systems is to specify the things you need to specify and let everything else fall back on a base specification, be it color, size, font-family, etc. This is usually done on <body>. I’ve honestly rarely seen it done differently in 15+ years of front-end work. The example you gave about accidentally overriding your H1 through H6 would not happen under that model. Those would be defined on their individual selectors.
You could argue that it’s different when you’re targeting a variety of devices for a native-like experience to which I would say YES, you need to provide a mechanism to set your base for different operating systems since each has its own standards and considerations under their respective design systems.
This is pretty basic if your using a framework or not. you can change the font by adding css to the global.scss file.
Well, Ionic is(among other things) a mobile framework…
And, as I suggested with the typography file, if you need and/or want to set things your way instead of ionic you can just comment everything default in the global.scss file and import your own. Or you can use a CSS framework too. To be honest this is the first time I see someone complaining about lack of a ‘base-x-thingie’ so I really haven’t given it much thought.