Typography - font size/style und Viewport

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute,

ich arbeite derzeit an einem eigenen Template und bräuchte eure Hilfe.

ich komme nämlich bei dem Viewport nicht mehr weiter. =(
Da ich das Template mobil optimiert, aber gleichzeitig auch Desktop-orientiert auf eBay einstellen möchte, brauche ich dafür unbedingt eine Lösung.

Ich hoffe ihr könnt mir hier weiterhelfen. Aus den ganzen Wikiseiten wurde ich bisher nicht schlau…

Ich weiß, dass sobald ich die Size im Body Font entferne, die Schriftart automatisch auf den Standard zurückgesetzt wird.
Außerdem weiß ich, dass ich mit PX, R/EM, %, VW, VH usw. absolute Größen festsetzen kann.

Mehr aber derzeit leider nicht.

Danke im Voraus!! =)

Hier ist das, was ich bisher habe:

/HTML/

/* CSS Document */

body,div,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,input,
textarea{margin:0;padding:0}
table{border-spacing:0;border-collapse:collapse}

body {font: 5vw „Century Gothic“,Verdana,sans-serif;}

/Body/

.bg {background: linear-gradient(to right, #000000, #ff0074, #000000); margin: 0px 0px 0px 0px; height: 600%; }
.bg2 {background: linear-gradient(to right, #e8e8e8, #ffffff, #e8e8e8); margin: 0 15% 0px 15%; height: 95%; }
.head img {width: 100%; background: linear-gradient( to right, #000000, #ff0074, #000000); }

.center {float: center; text-align: center; }
.left {float: left; text-align: left; }
.right {float: right; text-align: right; }
.tab {text-indent: 2.5%; }

/End Body/

.protab {width: 30%; margin: 5.5% 0 0 45%; position:absolute; }
.proa {width: 10%; Color: #7f0039; padding: 1% 0 0 0; }
.prob {width: 30%; Color #000; padding: 1% 0 0 0; }
.proc {width: 10%; Color: #7f0039; padding: 1% 0 0 0; }
.prod {width: 30%; Color #000; padding: 1% 0 0 0; }

Lorem
Ipsum Dolor
Sit Amet
Consetetur Sadipscing
Elitr Sed
Diam Nonumy
Eirmod Tempor
... ...
... ...
... ...
... ...
✓ ...
✓ ...
✓
2

Hallo

Deine Informationen sind leider eher vage und mißverständlich. Mit

aber gleichzeitig auch Desktop-orientiert auf eBay einstellen möchte

kann ich zum Beispiel nichts anfangen.

Um dir helfen zu können benötigen wir zudem möglichst konkrete Fragen.

Aus deinen Quellcodeschnipseln eine Webseite zu erstellen wird auch wenig bringen. Besser du schickst uns den Link zu der Seite. Kostenlosen Speicherplatz gibt es zum Beispiel bei

http://www.bplaced.net/

Der Webspace ist in der Regel bereits nach 10 Minuten freigeschaltet.

Für Schriftgrößen von Text haben sich die Einheiten px, em und rem bewährt. Ansonsten gilt: Die Schrift eher etwas größer machen und Standardfonts verwenden - keine Experimente. Änderungen erschweren den Besuchern das Lesen und lassen die Webseite schnell unseriös und kindlich wirken - was in der Regel vom Webseitenersteller nicht gewollt ist.

Ebay hat seine Regeln in den letzten Monaten radikal verschärft. Aktuelle responsive Seiten werden besser gerankt / weiter vorne angezeigt. Veralteten Quelltext, ohne responsivem Layout oder bei dem Tabellen zum Layouten mißbraucht werden, wollen die endlich loswerden. Da du keine Tabellendaten hast (nicht zu verwechseln mit einer Tabellendarstellung) solltest du bei Ebay (und auch sonst) nicht das table-Element verwenden.

Gruss

MrMurphy

3

Hallo MrMurphy,

vielen Dank für dein Feedback.

Die Daten über die Produkte, Bilder sowie Tabelleninformationen habe ich nicht erwähnt, da diese unerwähnt seien sollen.
Deshalb habe ich die Tabellendaten an das Lorem Ipsum angepasst.

Eine konkrete Fragestellung kann ich in dem Sinne nicht stellen.
Mein Problem ist folgendes:

Auf einem 1920x1080 px Bildschirm kann ich alles frei darstellen, so wie ich das möchte.
Auf das responsive Webdesign zurückführend, werden die Bildergrößen auf kleineren Bildschirmformaten auch übernommen (siehe unten), jedoch bleiben die Textgrößen absolut und passen sich nicht der Bildschirmgröße an.
Das hat sich bisher weder mit px, noch mit em, rem oder % einstellen lassen.
Stelle ich beispielsweise 16px für einen 1920x1080px Bildschirm ein, bleibt diese Größe konstant und wird unverändert auf einem 750x1336px Bildschirm dargestellt (Die Texte ragen über die Bildschirmweite hinaus und werden nicht kleiner).

Das Design soll sehr schlicht bleiben, so benutze ich keine Slidergrafiken, Bildergallerien o.Ä., die mit CSS auch nur beschränkt einstellbar sind. Die Seite ist lediglich so aufgebaut, dass Bilder, Texte und Tabellen an bestimmten Positionen auftauchen sollen. Und das klappt auch alles, nur die Skala für die Fonts schlägt fehl.

In meinem CSS Code verwende ich ansonsten weiter nur Klassen, die ich bereits auf Fehler überprüft habe.

Die

's sind ebenfalls abgestimmt, sowie die Reihenfolge im HTML Code.

Meine Fragestellung demnach:
Wie stelle ich den Font für meinen HTML Body so ein, dass die Textgröße sich bei anderen Bildformaten automatisch anpasst?

img {width: 25%; height: %; margin: -1.5% 0 0 17.5%; position:absolute; }
img2 {width: 25%; height: %; margin: 8% 0 0 19%; position:absolute; }

4

Hallo

Wie stelle ich den Font für meinen HTML Body so ein, dass die Textgröße sich bei anderen Bildformaten automatisch anpasst?

Gar nicht. Die Schriftgröße soll so gewählt werden dass die Besucher den Text problemlos lesen können. Die Schrift bei kleinerem Fenster oder kleinerem Bildschirm zu verkleinern ist somit schlicht Unsinn.

Genau so wie bei sehr großen Fenstern / Bildschirmen die Schrift übermäßig zu vergrößern.

Das restliche Layout muss sich bei gleichbleibender Schriftgröße der Bildschirmbreite anpassen - das gehört zum responsiven Layout.

Am sinnvollsten bietet man den Besuchern für Text eine Schriftgröße zwischen 16px und 20px an und läßt ihm die Möglichkeit per Browserzoom individuell auch andere Schriftgrößen zu wählen, ohne dass das Layout zerbröselt.

Gruss

MrMurphy

5

Hallo,
ich glaube, ich sollte meine Frage anhand von Bildern besser vorführen.

Ich möchte nicht, dass die Schriftgröße unterschiedliche Punktgrößen annimmt, sondern dass der Bildschirm die gleiche Schriftgröße richtig darstellt.
auf einem Desktop PC sieht diese größer aus, als auf einem Smartphone.

  • Das war meine Voraussetzung

Mein Problem wie oben beschrieben, erkennt man allerdings in den Bildern ganz gut:[ATTACH=full]4731[/ATTACH] [ATTACH=full]4732[/ATTACH]

6

Hallo

Das Schriften auf unterschiedlichen Monitoren unterschiedlich groß dargestellt werden ist nicht zu vermeiden.

Das ist aber auch kein Problem. Wie ich schon schrieb wählst du einfach eine etwas größere Schriftgröße als die üblichen 16px und alle sind glücklich.

Auf den Fotos sehe ich eher ein Problem mit Ebay. Offensichtlich willst du bei Ebay gut dastehen. Dazu benötigst du aber ein responsives Design. Die Schriftgröße spielt dabei aber (einmal vernünftig gewählt) überhaupt keine entscheidende Rolle.

Zu einem responsiven Layout müssen zunächst die korrekten Container für den Inhalt bestimmt werden. Tabellen sind für ein responsives Layout eher hinderlich und sollten auch nach den Regeln von HTML5 nicht mehr für Layoutzwecke mißbraucht werden. So auch in deinem Beispiel. Du willst Daten auflisten - benötigst also eine Liste. In deinem Fall eine dl-Liste. Die kann dann ohne Änderung der Schriftgröße an verschiedene Bildschirmbreiten angepasst werden.

Ohne einen konkreten Inhalt der Seite zu kennen können wir dir aber weder eine konkrete Lösung anbieten noch dir eine allgemeine für dich verständliche Erklärung bieten.

Ich habe vor einiger Zeit mal für einen anderen Fragesteller ein von Ebay aktuell erwartetes Layout erstellt. Das kannst du dir ja mal anschauen und damit rumspielen. Also die Fensterbreite ändern, die Seite auf unterschiedlichen Geräten und mit unterschiedlichen Browsern aufrufen oder rein-/rauszommen. Ohne dass die Schriftgröße sich ändert sieht die Seite immer gut aus und Ebay ist glücklich.

http://boratb.bplaced.net/index72.html

Gruss

MrMurphy

7

Hallo MrMurphy,

vielen Dank für deine Unterstützung.

ich werde mein Glück versuchen deinen Ratschlag bestmöglichst umzusetzen. Du hast in deinem Layout die volle
Bildschirmbreite verwendet. Ich habe in meinen ersten Zeilen CSS bereits festgelegt, dass ich nur 70% der Breite anzeigen möchte und den Hintergrund wie auf den Bildern anders darstellen möchte.
Ich habe das Ganze mit einem Margin gemacht und dabei aber immer wieder gemerkt, dass einzelne Objekte darüber hinaus ragten.

Hast Du - oder ein anderes Forenmitglied - Erfahrung mit einem solchen Layout?

Meiner Meinung nach sieht ein solches Design einfach professioneller aus.

Wäre es möglich hier den BG anders als mit Margin einzustellen?