Zeilenlänge testen

Lorem ipsum dolor sit amet, consetetur scing elitr, sed diam no numyei Rrmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Quelle: Jonas Helbig Mod.WebDesign  Kap: 2.2 Anpassung Typografie

Anpassung über Breakpoints mit

- Außenabstand rechts links z.B. 30px bei min-width 520px
-  Schriftgröße erhöhen bei min-width 560px auf 1.1em  / 640px auf 1.2em
-  Text begrenzen, z.B. mit einer max-width für den umschließenden Container, oder einem Bild daneben,

ODER

den Text auf mehrer Spalten aufteilen:

css:   column-count:2; /* für 2 Spalten*/  Browser-Präfixe beachten !!!

Breakpoint setzen

@media screen and (min-width:680px) {

     article { -moz-column-count:2; }

 

Im CSS eine Klasse vergeben, um entsprechende Texte anzusprechen:

.column_2_3 {

@media screen and (min-width:680px) {

     article { -moz-column-count:2; }

}

@media screen and (min-width:950px) {

     article { -moz-column-count:3; }

}

p {
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2; /*Spalten*/
	-webkit-column-gap:48px;
	-moz-column-gap:48px;
	colum-gap48px; /*Abstand zwischen den Spalten*/
}