{"id":640,"date":"2012-04-27T05:47:45","date_gmt":"2012-04-27T05:47:45","guid":{"rendered":"http:\/\/www.oert.org\/?p=640"},"modified":"2023-01-31T13:40:52","modified_gmt":"2023-01-31T13:40:52","slug":"typographic-styles","status":"publish","type":"post","link":"https:\/\/www.oert.org\/en\/typographic-styles\/","title":{"rendered":"Typographic styles"},"content":{"rendered":"\n<div class=\"box autor\">Created by: Natalia Fern\u00e1ndez, Paula Ibarra<\/div>\n\n\n\n<div class=\"box note\"><span class=\"dashicons dashicons-warning\"><\/span>&nbsp;&nbsp;Art\u00edculo en proceso de traducci\u00f3n <\/div>\n\n\n\n<div class=\"bajada\"><p>Typographic variables are options offered by one family in response to the different needs of visual communication. We use them, among other things, to establish different levels of hierarchy within a text, to alter color, to change rhythm, etc.<\/p><\/div>\n\n\n\n<p>Typographic variables are elements which, as they belong to a system, must maintain a formal relationship with the family to which they belong. Usually they act on the tilting, weight and width of the letter.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tilting<\/h3>\n\n\n\n<p>in rhythm. Sometimes the color may also be affected.<\/p>\n\n\n\n<p>Some programs have the \u00abitalic\u00bb function which tilts all the signs at a specific angle, but italics are not only that, and besides not all letters should have the same tilting: in the italic version of a font, the design of the signs is adjusted so as to achieve another color, it usually takes less space than the normal version and in certain cases (for instance in roman typefaces and in some sans-serif ones) the design of the signs adopts some cursive characteristics. To verify this, let\u2019s take a look at the example below to see how the design of the sign varies.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_01-rosario_a__variables1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"525\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_01-rosario_a__variables1.jpg\" alt=\"Rosario: variables\" class=\"wp-image-796\" title=\"Rosario: variables\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_01-rosario_a__variables1.jpg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_01-rosario_a__variables1-300x224.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image alignnone\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_02-rosario_variables_secuencia1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"525\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_02-rosario_variables_secuencia1.jpg\" alt=\"Rosario: variables (secuencia)\" class=\"wp-image-797\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_02-rosario_variables_secuencia1.jpg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_02-rosario_variables_secuencia1-300x224.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><figcaption class=\"wp-element-caption\">El segundo texto est\u00e1 compuesto en Rosario Gris inclinada digitalmente.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Weight<\/h3>\n\n\n\n<p>Weight variables affect the stroke of the signs, which may result in small structural modifications. What is mainly altered is the typeface color, as there is a change in the relation between the width of the stroke and the counterform of each typographic sign.<\/p>\n\n\n\n<p>To use a bold typeface the corresponding variable has to be available, it is not convenient to transform a normal font in a bold one by electronic means.<\/p>\n\n\n\n<p>The difference is that the bold variable is specifically designed to function as such, while when electronic means are used to alter the font, the machine adds a black border around each sign, modifying the counterforms, the adjustments, and &#8211; in the case of roman typefaces \u2013 the contrast between the thick and the thin of gradual strokes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_03-variables_stroke1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"526\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_03-variables_stroke1.jpg\" alt=\"Variables de peso\" class=\"wp-image-798\" title=\"Variables de peso\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_03-variables_stroke1.jpg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_03-variables_stroke1-300x225.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Width<\/h3>\n\n\n\n<p>In width variables, there is a change in the structure of the letter where only the proportions are modified, though the stroke does not vary. The performance is altered (in the first place) and also the color of the text.<\/p>\n\n\n\n<p>Condensed and expanded fonts are also specially designed, thus we should not modify the width using electronic means, as the signs would become deformed.<\/p>\n\n\n\n<p>This is more obvious in uniform stroke typefaces: when electronically condensed or expanded they lose the uniformity of the stroke.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_07-texto_expandido1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"526\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_07-texto_expandido1.jpg\" alt=\"Texto deformado (expansi\u00f3n mec\u00e1nica)\" class=\"wp-image-802\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_07-texto_expandido1.jpg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_07-texto_expandido1-300x225.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><figcaption class=\"wp-element-caption\">Texto deformado (expansi\u00f3n mec\u00e1nica)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_05_eurostile_expandida11.jpeg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"526\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_05_eurostile_expandida11.jpeg\" alt=\"Eurostile expandida\" class=\"wp-image-985\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_05_eurostile_expandida11.jpeg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_05_eurostile_expandida11-300x225.jpeg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><figcaption class=\"wp-element-caption\">Eurostile expandida<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_04-myriad_condensada11.jpeg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"526\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_04-myriad_condensada11.jpeg\" alt=\"Myriad condensada\" class=\"wp-image-986\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_04-myriad_condensada11.jpeg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_04-myriad_condensada11-300x225.jpeg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><figcaption class=\"wp-element-caption\">Myriad condensada<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Small Caps<\/h3>\n\n\n\n<p>Finally, within this description of variables, we can also mention small caps. Small caps are alphabets with capitals\u2019 structure, but which maintain the height of lower case signs. We use this option, for instance, when we need to use capitals but do not want to create irregularities in the color of the text.<\/p>\n\n\n\n<p>In the graph, from top to bottom: the word composed in lower case, then in small caps, and finally, in \u00abmachine\u00bb small caps, which are signs with a 75% reduction in their size. Among the conflicts that result from this we find: first, artificial small caps do not have the same height as lower case, and second, they do not maintain the color of the lower case. Bembo 24 pt was used.<\/p>\n\n\n\n<p>The criteria mentioned in this text are not the only ones to be followed in order to decide how to create typeface variables, but are the most widely used ones.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_06-versalitas1.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"701\" height=\"526\" src=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_06-versalitas1.jpg\" alt=\"Calluna: versalitas\" class=\"wp-image-801\" title=\"Calluna: versalitas\" srcset=\"https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_06-versalitas1.jpg 701w, https:\/\/www.oert.org\/wp-content\/uploads\/2012\/07\/T06A_06-versalitas1-300x225.jpg 300w\" sizes=\"(max-width: 701px) 100vw, 701px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Functions and convention in the use of styles. Traditional axes. Recognizing designed variants and the effects of digital distortion. Small capitals: character weight and line color.<\/p>\n","protected":false},"author":1,"featured_media":2734,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,19],"tags":[],"_links":{"self":[{"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/posts\/640"}],"collection":[{"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":0,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/media\/2734"}],"wp:attachment":[{"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oert.org\/en\/wp-json\/wp\/v2\/tags?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}