[Résolu] Typo (font) responsive en vw, vh, em, % ne résout pas mon pro

Bonsoir,
Tout est dit dans le titre.
J'ai tenté toutes les unités...
Pour greenp : impeccable.
Le jaune p me pose problème. A mon avis, surtout à cause des marges. A vérifier.
Voici le peu de CSS concernées :

#green {
	height: 100vh!important;
	background-color: yellow;
	overflow:hidden;
	text-align: center;
}
#green p{
font-size: 140vw!important;
	transform: rotate(-90deg);
	margin-left: -0.38em;tex-align: left;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
#jaune {
	height: 100vh!important;
	background-color: yellow;
	overflow:hidden;
	text-align: center;
}
#jaune p{
	margin-top:-0.2em; 
	position: relative;
	font-size: 114vh!important;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}

ça ne doit pas être grand chose (j'y arrive bien pour le texte vertical
Mais pas pour l'horizontal
Merci et bon week-end,
P.
Modifié par PLGPPUR (22 Oct 2022 - 22:22)

Hello,

	font-size: 114vh!important;

Je suppose que le problème vient de cette valeur mais je ne comprends pas du tout où tu veux en venir. Quel est le rapport entre la taille de police et la hauteur de la fenêtre ? (la largeur, je comprendrais mais pourquoi la hauteur ?)
Et surtout pourquoi veux-tu que chaque caractère occupe 114% de la hauteur de fenêtre ? C'est tout simplement énormissime.

Je crois que ce site pourrait bien t'aider :
https://www.ionos.fr/digitalguide/sites-internet/web-design/police-de-caracteres-adaptatives-et-commandes-css/
Tout y est expliqué pour adapter avec les @media à la fois le texte, les titres et la hauteur des lignes suivant les tailles d'écrans.

Bonsoir Raphael et Bongota,
Merci pour vos réponses
@Raphael :

font-size: 114vh!important;

car je souhaite que la hauteur de la font soit supérieure à la taille de la div
@Bongota : tu pense qu'il faut jouer avec les Média Queries ?
Selon la largeur de la fenêtre, le texte est soit centré en hauteur, soit c'est l'équivalent d'un margin-top: -40/80%, ou margin-bottom 40/80%
Un vertical-align: middle et je n'ai plus rien dans la fenêtre
Merci pour votre aide et bonne soirée,
P.
Modifié par PLGPPUR (25 Oct 2022 - 12:11)

Bonsoir Bongota et Raphaël,
Encore merci de vous être penchés sur mon problème
Le problème était du à une rotation sur une classe (qui ne figure pas dans cette discussion)
Pour mieux comprendre :
https://forum.alsacreations.com/topic-4-90044-1.html
J'ai supprimé la classe pelvis (donc je me retrouve avec une #jaune sans classe) et rajouter un rotate 0 à la div (#jaune).
Le problème, et vous ne pouviez pas le deviner provenait de là (class rotate)
Suis-je clair ?
Je m'en vais rotater une autre discussion.
Bonne soirée et merci à vous
P.