Relative Font Size in Vanilla Theme

[kookma]

See $:/themes/tiddlywiki/vanilla/base

.tc-missing-tiddler-label {
	font-style: italic;
	font-weight: normal;
	display: inline-block;
	font-size: 11.844px;
	line-height: 14px;
	white-space: nowrap;
	vertical-align: baseline;
}

Isn't it better to use relative size e.g. font-size: 0.8em; This way I can only change font size in $:/themes/tiddlywiki/vanilla/metrics/fontsize and make sure everything works as expected.

[pmario]

Yes it "kind of" would be better. But "em" also has it flaws. eg: em is "relative to parent", which means that we can never be sure, what's going on, without analysing the whole html structure.

For a consistent design we should use rem, which is "relative to root".

The TW vanilla theme was created in about 2012, where px was still very common.

The main problems are:

• My browser has a font default setting of 16px for prose text
• But none of the TW font-size uses this default.
• The vanilla "Theme Tweaks" immediately reduces this size to 14px

So I think we should first change the default value to 16px as every modern desktop and mobile browser does.

We also needed to define a new Line height that fits to the new font-size. IMO a unit-less line-height of 1.5 or 1.6 are common these days.

We then could define Font size for tiddler body and Line height for tiddler body based relatively to the new global settings. I would use the same settings here. So 1rem for both.

Then the vanilla theme CSS has to be adjusted to use rem based values if and only if they are needed.

IMO With those changes it would be possible to create much more consistent behaviour.

[kookma]

We then could define Font size for tiddler body and Line height for tiddler body based relatively to the new global settings. I would use the same settings here. So 1rem for both.

Why we need two base font sizes? Can we set the body font size and set tiddler-body font based on that?

[pmario]

@Jermolene ... Can you remember why you did initially define 2 different font-sizes for the tiddler body and the rest of the UI?

[Jermolene]

Hi @pmario the goal was to simplify changing the size of tiddler body text without affecting the rest of the user interface.

[pmario]

IMO the following settings would create a "somewhat" backwards compatible behaviour for the UI, but sets the tiddler body font-size to 16px.

IMO Based on these settings we could start to review the current vanilla CSS.

[pmario]

It would slightly increase the line-height globally, which makes all link lists easier to "touch" on mobile devices.

[Jermolene]

Hi @pmario I tried your suggestions but found that there are unacceptably large deviations from the current metrics as shown in this animated GIF. The current layout is the one with the narrower menu bar and the smaller sidebar:

[pmario]

@Jermolene -- The changes are intended to create a bigger text and "clickable" areas by default.

PC and mobile screens get higher and higher resolutions and the clickable areas especially for mobile devices are way to small with the current TW settings.

IMO the suggested setting would bring the TW configuration "on par" with existing web pages, in terms of default font-size.

On my full HD screen most of the time I need to set browser zoom to 110% or 120% if I want to "read" a TW page.
For development 80% or 90% work well, to see more.

But imo TW default settings should be defined for "readers" and not developers. -- Just my thoughts.

[Jermolene]

Hi @pmario those seem like worthwhile changes to explore for v5.4.0, but my comment was prompted by the suggestion that we include these changes in v5.3.7.

I think v5.4.0 should thoroughly update the visual aesthetic of TiddlyWiki, including typography, layout, palettes: everything is up for discussion.

[pmario]

I think for 5.3.7 it should stay as it is

[pmario]

I think @kookma is "blocked" off the internet atm. So my question for him would be, what the goal was for the OP is in general.