Ja Hallo zusammen, ich zeige euch, wie wir die Schriften anpassen können und was es einfach bei Schriften grundsätzlich zu beachten gibt. Und ich bin hier auf der Startseite und ich lege jetzt als allererstes mal eine Demo Überschrift an, indem ich hier einfach mal schreibe Headline 1 und nochmal headline 2. So und dann speichere ich das und schaue mir das im Browser an.

So, wir sehen jetzt hier natürlich Standard Schriftgrößen, die vorkonfiguriert worden sind und ganz wichtig, WORDPRESS unterstützt die Möglichkeit, sogenannte Fluide Schriftgrößen zu verwenden, das heißt, diese Schriftgröße ist abhängig von der viewport Breite, also von der Breite meines Browserfensters und ändert sich, wenn ich mir das also jetzt hier mal angucke, wie groß ist diese Headline jetzt momentan auf einer Größe von was haben wir jetzt hier 1016 in der Breite?
Dann haben wir hier eine Schriftgröße. Wir sehen das hier in diesem kleinen Tooltip, da steht von 37,39 Pixel im Code ist das natürlich ein EM oder rem wert, also eine relative Schrifteinheit.

Aber der Browser rechnet das natürlich immer in Darstellungspixel um. Und jetzt? Momentan haben wir, sage ich mal so 37,39 Pixel an der Darstellungsgröße und wenn ich jetzt den View pod verändere, dann sieht man das auch hier, dann wird das eben etwas kleiner und wenn ich jetzt mal hier auf dem Smartphone runter gehe, dann hat diese Überschrift plötzlich noch 30 Pixel Schriftgröße so, das heißt das schrumpft alles so dynamisch und das betrifft nicht nur die Schriften, sondern es Beschrifft auch Abstände und alles, was sozusagen relativ auf Basis der Schriftgröße definiert worden ist. Das kann ausgeschaltet werden, aber standardmäßig ist das etwas, was wir eigentlich bei allen Projekten haben wollen, damit eben der unterschiedliche Betrachtungsabstand von Smartphone zu Desktop und auch der unterschiedliche Platz, den wir auf den verschiedenen Geräten haben, von Smartphone zu Desktop Computer. Dass das ganze gestalterisch eben auch berücksichtigt wird, okay.

Gut, das erstmal so grundsätzlich und wenn ich jetzt mir anschaue, wie ist diese Systematik denn aufgebaut, dann gehe ich in den Side Editor rein, da kann ich das alles einstellen unter Design Editor in den Stilen und in der Typografie so und.

Ich habe natürlich die Möglichkeit, die Schriftart zu verändern. Wir nutzen standardmäßig eine serifenlose Systemschrift, das bedeutet, die kann durchaus unterschiedlich sein unter Windows und Mac beispielsweise eine andere Systemschrift oder auch in einem Browser eine andere Standardschrift, aber sie ist eben immer serifenlos.

Und wenn dann eine andere Schrift verwendet werden soll, dann geht ihr hier hin und fügt sozusagen hier über Schriften installieren oder über Upload eine eigene Schrift hinzu. Also bei Upload könntet ihr eine gekaufte Schrift im wo FF 2 Format beispielsweise jetzt hochladen und hier hättet ihr die Möglichkeit die Google Fonds zu verbinden und.

Dann könntet ihr da eine Schrift auswählen und anschließend würde wordpress diese Schrift auch für euch herunterladen und auf eurem Server ablegen, damit das ganze Datenschutzkonform ist. Okay und dann steht eben am Ende nicht nur diese eine Schrift hier System zur Verfügung, sondern eben auch noch die Zweite, die ihr dann eingerichtet habt, okay.

Das ist denke ich relativ klar. Deswegen gehe ich da jetzt gar nicht so detailliert drauf ein. Dann habe ich natürlich die verschiedenen Elemente, wo ich, ich sag mal Schriften zuweisen kann, also wenn ich jetzt zum Beispiel noch eine Serifenschrift installiert hätte, dann könnte ich sagen, dass ich möchte, dass alle Überschriften die Serifenschrift benutzen und alle anderen Elemente eben nicht so und hier unten, da wird es dann eigentlich für mich ein bisschen spannender, da kommen wir dann eben zu den Schriftgrößen Vorgaben.

So, und wenn ich mir jetzt angucke, die Headline 1 und die Headline 2, die haben halt bestimmte Größen bekommen und insgesamt haben wir 10 Größen vorbereitet. Momentan heißen die alle so wie sie aussehen, wobei sie natürlich dynamisch sind, das heißt, sie sind sozusagen.

Ich sag mal die die typische Darstellungsgröße entspricht diesem Wert hier. Das könnt ihr natürlich alles um beschriften. Ja, also wenn ihr möchtet, dass die hier Tiny heißt oder winzig und die hier Hughes oder riesig, dann könnt ihr das in der 7 JSON anpassen. Wir möchten mit dieser Ausgangssituation starten, weil das für uns am meisten Spielraum und Flexibilität in verschiedenen Projekten bietet und dann könnte ich eben hingehen und könnte sagen naja, hier diese Schriftgröße sagen wir mal 32.

Wie ist die denn momentan definiert? Und dann sehe ich, das ist eine fluide Schriftgröße, die WordPress hier aktiviert hat und die variiert eben zwischen 2 und 2,5 rem, das heißt diese 32 Pixel, die wir als Beschriftung momentan hier verwendet haben, die entsprechen dem Minimalwert 2 rem die Basis Schriftgröße im Browser ist immer 16 Pixel, also 2 x 16 ist eben 32 und dann kann sie eben sozusagen anwachsen bis maximal 2,5 RM. Das könntet ihr also hier dann für alle diese Schriften auch quasi überschreiben, wobei das eine relativ, ich sage mal komplizierte Angelegenheit wird, also da kann man sich schnell, sage ich mal, so ein bisschen in so ein Rapid Hole begeben und anschließend konfiguriert man da doch recht zeitintensiv dran rum, das heißt?

Wir ändern da gar nicht so viel dran, sondern haben einmal viel Arbeit da reingesteckt, Ausgangsschriftgrößen zu haben, mit denen wir einfach sehr flexibel wegarbeiten können. Abgesehen davon, dass wir die halt möglicherweise umbenennen, was diesen Begriff hier angeht. Das ist aber nicht der Begriff, der im Code verwendet wird, im Code heißen die Schriften Schrift, 12345 und so weiter, sondern das ist sozusagen das Label, also die Beschriftung, die zum Beispiel der Kunde sieht und was das jetzt sinnvoll sein sollte, das ist eben sehr projektspezifisch und deswegen passen wir das dann häufig gar nicht von der Schriftgröße oder im Code an, im Code sowieso nach Möglichkeit gar nicht, sondern eigentlich nur von der Beschriftung, die der Kunde sieht, damit leichter die passende Schrift gewählt werden kann oder auch damit Fehler vermieden werden. Ja, wenn ich also möchte, dass der Kunde immer für ein bestimmtes Element dann.

Eine bestimmte Überschrift nimmt, dann macht es möglicherweise Sinn, diese Überschrift genauso zu nennen, also zum Beispiel Boxtitle oder so etwas. Ja damit immer, wenn der Kunde einer Box einen Titel gibt, der auch die richtige Überschrift wählt, aber das ist wie gesagt sehr, sehr projektspezifisch. Ja, das ist das Zuweisen von oder das sind die Schriftgrößenvorgaben und dann habe ich hier natürlich die Möglichkeit, diese Schriftgrößen, zum Beispiel den Überschriften zuzuweisen. Das ist alles in der Theme json vorkonfiguriert und wenn ich jetzt hier mal in die Überschriften zum Beispiel reingehe, dann würde ich hingehen und würde mir zum Beispiel die h 1 schnappen und dann würde ich sehen, A die h 1.

Ist mit unserer Schriftgröße 32 Pixel quasi gemappt. Das heißt wir haben einmal eine Liste von Schriftgrößen angelegt, dann gibt es halt einfach bestimmte Standardüberschriftengrößen in HTML und wir haben die hier gemappt und wenn ihr dieses Mapping verändern wollt, dann müsstet ihr eben und deswegen zeige ich diese Stelle hier in die Überschriften reingehen und nicht in alle, sondern dann eben in die, die jeweils angepasst werden, sondern dann könnt ihr dieses Mapping anpassen.

Könnte also sagen, die h 4 soll nicht mehr 24 Pixel groß sein oder also ihr könnt jetzt hier eine andere Zuordnung wählen oder ihr könnt natürlich auch hingehen und sagen, naja, diese 24 Pixel hier, die sollen zum Beispiel anders hinsichtlich ihres Fluiden, ihrer fluiden Schriftskalierung funktionieren oder was auch immer oder ihr benennt einfach die 24 Pixel um.

Das müsste dann allerdings aktuell in der Theme json passieren, ganz einfach, weil wordpress diese Möglichkeit im Zeit Editor momentan noch nicht bietet. Aber immer wenn wir das Bedürfnis haben, hier eine Anpassung kundenspezifisch zu machen, dann arbeiten wir ohnehin in der Theme json, deswegen ist es für uns jetzt nicht, ist das jetzt kein großer Mehraufwand oder ein Nachteil, ja das das ist eigentlich alles, was wir bei den Schriften.

Wissen müssen. Ich zeige noch ganz kurz, wie die Stelle in der Theme json aussehen würde, wo wir das anpassen. Ich gehe wieder hier in die Werkzeuge in den Theme Datei Editor, ich zeige das jetzt hier am Parent Theme die Theme json ist da ein bisschen unübersichtlich, aber die Stelle ist natürlich die Gleiche, also ich gehe hier in die Theme json rein und.

Und dann habe ich hier den Abschnitt Settings, da gibt es eben die Color Einstellungen oder Layout und so weiter und wenn ich hier über die ganzen Farben drüber gegangen bin, so dann werde ich natürlich irgendwann auch den Bereich mit hier Abständen Schatten habe ich gerade noch gesehen, border Radius habe ich gesehen und dann fängt hier irgendwann Typografie an und hier.

Sind die dann alle definiert? So? Also da wäre beispielsweise jetzt die Schriftgröße 32 Pixel, da sehe ich okay der Slug also im Code heißt diese Schrift sozusagen Schrift 10 und die ist eben Fluid zwischen 2 rem und 2,5 rem und der Name den der Kunde sieht oder den auch wir eben im Administrationsbereich gesehen haben, der heißt eben 32 Pixel und an dieser Stelle könnte ich das dann umbenennen und könnte eben sagen, das heißt was weiß ich.

Page title oder was auch immer dann da stehen soll, was dann projektspezifisch Sinn macht.