{"id":10007,"date":"2022-09-12T18:32:44","date_gmt":"2022-09-12T18:32:44","guid":{"rendered":"https:\/\/glossary.dream.press\/glossary\/?post_type=glossary&#038;p=10007"},"modified":"2025-06-11T21:37:36","modified_gmt":"2025-06-11T21:37:36","slug":"typografie-de","status":"publish","type":"glossary","link":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/","title":{"rendered":"Typografie"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Typografie vs. Schriftarten<\/h3>\n\n\n<p>Typografie ist das Design und das visuelle Erscheinungsbild von Text, w\u00e4hrend <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/font\/\">Schriftarten<\/a> auf die spezifischen Schrifttypen oder -familien verweisen, die in einem typografischen Design verwendet werden. Schriftarten werden verwendet, um einen einzigartigen Look f\u00fcr den Text zu schaffen, w\u00e4hrend Typografie die gesamte Komposition dieses Looks ist.<\/p>\n\n\n<p>Die Schriftart ist ein wichtiger Bestandteil der Typografie in jedem Projekt, da sie dazu beitragen kann, eine bestimmte Stimmung oder ein bestimmtes Gef\u00fchl zu vermitteln. Sie kann auch W\u00f6rter leichter lesbar machen und die Aufmerksamkeit auf Schl\u00fcsselelemente innerhalb des Projekts lenken. Indem Designer Schriftarten sorgf\u00e4ltig ausw\u00e4hlen und sie mit anderen Elementen wie Farbe, Layout und Bildmaterial kombinieren, k\u00f6nnen sie Geschichten mit Text erz\u00e4hlen, die visuell ansprechend und wirkungsvoll sein werden.<\/p>\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2786\" height=\"1242\" src=\"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png\" alt=\"Schriftarten in Google Fonts\" class=\"wp-image-1171\" srcset=\"https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png 2786w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-300x134.png 300w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-1024x456.png 1024w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-768x342.png 768w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-1536x685.png 1536w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-2048x913.png 2048w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-600x267.png 600w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-750x334.png 750w, https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography-100x45.png 100w\" sizes=\"auto, (max-width: 2786px) 100vw, 2786px\" \/><\/figure>\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\">Typografie vs. Schriftarten<\/h3>\n\n\n<p>Typografie besch\u00e4ftigt sich mit dem gesamten visuellen Erscheinungsbild eines gegebenen Textst\u00fccks. Schriftarten hingegen sind spezifische Schrifts\u00e4tze, die in der Typografie verwendet werden k\u00f6nnen, um der Komposition ein bestimmtes Aussehen und Gef\u00fchl zu verleihen.<\/p>\n\n\n<p>Obwohl Schriftart und Schriftfamilie oft synonym verwendet werden, sind sie nicht dasselbe. Schriftarten beziehen sich auf das spezifische Design eines Buchstabens oder Zeichens \u2013 seine <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/font-size\/\">Gr\u00f6\u00dfe<\/a>, <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/font-weight\/\">Gewicht<\/a>, <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/font-style\/\">Stil<\/a> usw. \u2013 w\u00e4hrend eine Schriftfamilie eine gesamte <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/font-family\/\">Familie von Schriftarten<\/a> ist, die bestimmte Merkmale wie Breite und Neigung gemeinsam haben. Zum Beispiel ist Times New Roman eine Schriftfamilie mit mehreren verschiedenen Schriftarten; diese Schriftarten k\u00f6nnen in der Gr\u00f6\u00dfe von 12 Punkt bis 18 Punkt variieren.<\/p>\n\n\n<p>Beim Einsatz von Typografie zur visuellen Gestaltung von Designprojekten ist es wichtig zu bedenken, dass Schriftarten und Schriftschnitte separate Einheiten sind.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Zeilen- und Buchstabenabstand<\/h3>\n\n\n<p>Zeilen- und <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/letter-spacing\/\">Buchstabenabstand<\/a>, auch bekannt als Tracking und Kerning, sind extrem wichtige Aspekte der Typografie. Der Zeilenabstand (oder <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/line-height\/\">Zeilenh\u00f6he<\/a>) ist der Abstand zwischen den Zeilen eines Textk\u00f6rpers. Er kann angepasst werden, um eine visuelle Hierarchie f\u00fcr verschiedene Textteile zu schaffen: Mehr Raum zwischen den Zeilen kann den Text leichter lesbar machen, indem S\u00e4tze oder Ideen getrennt werden, w\u00e4hrend weniger Zeilenabstand den Eindruck erweckt, dass alles zusammengeh\u00f6rt.<\/p>\n\n\n<p>Buchstabenabstand ist andererseits die Menge an horizontalem Raum zwischen einzelnen Buchstaben, was dazu beitr\u00e4gt, ein deutliches Aussehen f\u00fcr W\u00f6rter und Phrasen in der Typografie zu schaffen. Die Anpassung dieser Einstellung kann es Lesern erleichtern, W\u00f6rter voneinander zu unterscheiden oder eine absichtliche Betonung auf bestimmte W\u00f6rter zu legen.<\/p>\n\n\n<p>Durch die Manipulation dieser beiden Elemente innerhalb einer beliebigen Komposition haben Designer m\u00e4chtige Werkzeuge zur Verf\u00fcgung, um koh\u00e4rente Designs zu erstellen, die ihre visuellen Ziele erreichen.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Arbeiten Mit Farbe In Der Typografie<\/h3>\n\n\n<p>Wenn es um die Verwendung von Farbe in der Typografie geht, gibt es einige bew\u00e4hrte Praktiken, die Du beachten solltest:<\/p>\n\n\n<h4 class=\"wp-block-heading\">Lesbarkeit &amp; Zug\u00e4nglichkeit<\/h4>\n\n\n<p>Es ist wichtig, Farben auszuw\u00e4hlen, die lesbar sind und nicht <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/accessibility\/\">schwer zu lesen<\/a> sind, sowie Farben, die sich <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/contrast\/\">vom Hintergrund abheben<\/a>, um die Sichtbarkeit zu gew\u00e4hrleisten.<\/p>\n\n\n<h4 class=\"wp-block-heading\">Zweck &amp; Bedeutung<\/h4>\n\n\n<p>Beim W\u00e4hlen der Farben muss man vorsichtig sein, um sicherzustellen, dass die Bedeutung hinter den Worten nicht verloren geht. Zum Beispiel kann Rot (Aktion, Intensit\u00e4t) etwas anderes symbolisieren als Blau (autorit\u00e4r, vertrauensw\u00fcrdig) oder Gelb (hell, beruhigend).<\/p>\n\n\n<h4 class=\"wp-block-heading\">Einheit<\/h4>\n\n\n<p>Es ist auch wichtig, das Gesamtbild und die Atmosph\u00e4re deiner Designkomposition zu ber\u00fccksichtigen, wenn du Farben f\u00fcr die Typografie ausw\u00e4hlst, da jede Farbe unterschiedliche Emotionen oder Gef\u00fchle hervorrufen kann. Farben und <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/hue\/\">Farbt\u00f6ne<\/a> auszuw\u00e4hlen, die mit dem Rest deiner Komposition harmonieren, wird einen gro\u00dfen Beitrag zur Schaffung eines koh\u00e4renten Designs leisten.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Texteffekte<\/h3>\n\n\n<p>Texteffekte k\u00f6nnen eine gro\u00dfartige M\u00f6glichkeit sein, die Aufmerksamkeit auf wichtige W\u00f6rter oder Phrasen in deiner Designkomposition zu lenken, aber zu viele Effekte k\u00f6nnen schnell \u00fcberw\u00e4ltigend und \u00fcberm\u00e4\u00dfig ablenkend wirken.<\/p>\n\n\n<p>Die Verwendung von subtilen Effekten wie Schatten, Umrandungen und Verl\u00e4ufen kann Tiefe und Dimension zur Gesamtbotschaft hinzuf\u00fcgen, die vermittelt wird. Andererseits kann zu viel Texteffekt das Design \u00fcberladen wirken lassen und es den Lesern erschweren, die Botschaft zu erfassen.<\/p>\n\n\n<p>Texteffekte sollten sparsam verwendet werden, um die Lesbarkeit zu verbessern und ein einheitliches visuelles Erscheinungsbild zu wahren.<\/p>\n","protected":false},"featured_media":0,"parent":0,"menu_order":0,"template":"","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten."},"group":[491],"class_list":["post-10007","glossary","type-glossary","status-publish","hentry","group-webdesign-de"],"acf":{"cta":"Custom Web Design","term_definition":"Typography ist ein Prozess des Anordnens einer Schriftart in Variationen von Schrift, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.","h2_more":"Mehr \u00dcber Typografie","title_tag":"Was Ist Typografie?"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Typografie - DreamHost Glossary<\/title>\n<meta name=\"description\" content=\"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Typografie - DreamHost Glossary\" \/>\n<meta property=\"og:description\" content=\"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dreamhost.com\/glossary\/de\/webdesign-de\/typografie-de\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Glossary\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T21:37:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2786\" \/>\n\t<meta property=\"og:image:height\" content=\"1242\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Typografie - DreamHost Glossary","description":"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/","og_locale":"en_US","og_type":"article","og_title":"Typografie - DreamHost Glossary","og_description":"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.","og_url":"https:\/\/www.dreamhost.com\/glossary\/de\/webdesign-de\/typografie-de\/","og_site_name":"DreamHost Glossary","article_modified_time":"2025-06-11T21:37:36+00:00","og_image":[{"width":2786,"height":1242,"url":"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/","url":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/","name":"Typografie - DreamHost Glossary","isPartOf":{"@id":"https:\/\/glossary.dream.press\/glossary\/#website"},"primaryImageOfPage":{"@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/#primaryimage"},"image":{"@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png","datePublished":"2022-09-12T18:32:44+00:00","dateModified":"2025-06-11T21:37:36+00:00","description":"Typografie ist ein Prozess der Anordnung einer Schriftart in Variationen von Schriftart, Gr\u00f6\u00dfe und Abstand. Dies beinhaltet, das Erscheinungsbild, den Stil und die Anordnung des Textes lesbar und optisch ansprechend zu gestalten.","breadcrumb":{"@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/#primaryimage","url":"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png","contentUrl":"https:\/\/www.dreamhost.com\/glossary\/wp-content\/uploads\/2022\/09\/google-font-family-typography.png"},{"@type":"BreadcrumbList","@id":"https:\/\/glossary.dream.press\/glossary\/de\/webdesign-de\/typografie-de\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.dreamhost.com\/glossary\/"},{"@type":"ListItem","position":2,"name":"Terms","item":"https:\/\/www.dreamhost.com\/glossary\/%group%\/"},{"@type":"ListItem","position":3,"name":"Typografie"}]},{"@type":"WebSite","@id":"https:\/\/glossary.dream.press\/glossary\/#website","url":"https:\/\/glossary.dream.press\/glossary\/","name":"DreamHost Glossary","description":"","publisher":{"@id":"https:\/\/glossary.dream.press\/glossary\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/glossary.dream.press\/glossary\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/glossary.dream.press\/glossary\/#organization","name":"DreamHost","url":"https:\/\/glossary.dream.press\/glossary\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/glossary.dream.press\/glossary\/#\/schema\/logo\/image\/","url":"https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/10\/dreamhost-glossary-social.jpg","contentUrl":"https:\/\/glossary.dream.press\/glossary\/wp-content\/uploads\/2022\/10\/dreamhost-glossary-social.jpg","width":2400,"height":1256,"caption":"DreamHost"},"image":{"@id":"https:\/\/glossary.dream.press\/glossary\/#\/schema\/logo\/image\/"}}]}},"lang":"de","translations":{"de":10007,"es":1624,"en":891,"fr":7810,"nl":7839,"it":8731,"pt":9962,"pl":10003,"ru":10202,"uk":10204},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/glossary.dream.press\/glossary\/wp-json\/wp\/v2\/glossary\/10007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/glossary.dream.press\/glossary\/wp-json\/wp\/v2\/glossary"}],"about":[{"href":"https:\/\/glossary.dream.press\/glossary\/wp-json\/wp\/v2\/types\/glossary"}],"wp:attachment":[{"href":"https:\/\/glossary.dream.press\/glossary\/wp-json\/wp\/v2\/media?parent=10007"}],"wp:term":[{"taxonomy":"group","embeddable":true,"href":"https:\/\/glossary.dream.press\/glossary\/wp-json\/wp\/v2\/group?post=10007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}