<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>source serif 4 Archives - Dandelium Studio</title>
	<atom:link href="https://dandelium.studio/ca/tag/source-serif-4-ca/feed/" rel="self" type="application/rss+xml" />
	<link>https://dandelium.studio/ca/tag/source-serif-4-ca/</link>
	<description>Website creation and design</description>
	<lastBuildDate>Wed, 05 Jun 2024 16:04:08 +0000</lastBuildDate>
	<language>ca</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://dandelium.studio/wordpress/wp-content/uploads/2022/03/cropped-icon-white-32x32.png</url>
	<title>source serif 4 Archives - Dandelium Studio</title>
	<link>https://dandelium.studio/ca/tag/source-serif-4-ca/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Conceptes de tipografia: famílies tipogràfiques vs fonts</title>
		<link>https://dandelium.studio/ca/disseny/tipografia/conceptes-de-tipografia-families-tipografiques-vs-fonts/</link>
					<comments>https://dandelium.studio/ca/disseny/tipografia/conceptes-de-tipografia-families-tipografiques-vs-fonts/#respond</comments>
		
		<dc:creator><![CDATA[Montse]]></dc:creator>
		<pubDate>Wed, 05 Jun 2024 16:04:05 +0000</pubDate>
				<category><![CDATA[Disseny]]></category>
		<category><![CDATA[Tipografia]]></category>
		<category><![CDATA[disseny]]></category>
		<category><![CDATA[font vs família tipogràfica]]></category>
		<category><![CDATA[inclinació]]></category>
		<category><![CDATA[pes]]></category>
		<category><![CDATA[source serif 4]]></category>
		<category><![CDATA[tipografies]]></category>
		<guid isPermaLink="false">https://dandelium.studio/?p=4929</guid>

					<description><![CDATA[<p>Segons la Viquipèdia, la tipografia és &#8220;l&#8217;art i la tècnica d&#8217;organitzar tipus per fer que el llenguatge escrit sigui llegible, llegible i atractiu quan es mostra&#8221;. Cobreix àrees com l&#8217;elecció de tipus de lletra, la combinació, l&#8217;elecció del ritme vertical adequat, el control de la longitud de les línies, l&#8217;espaiat de lletres, entre d&#8217;altres. Com [&#8230;]</p>
<p>The post <a href="https://dandelium.studio/ca/disseny/tipografia/conceptes-de-tipografia-families-tipografiques-vs-fonts/">Conceptes de tipografia: famílies tipogràfiques vs fonts</a> appeared first on <a href="https://dandelium.studio/ca/necessites-una-pagina-web">Dandelium Studio</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p><a href="https://en.wikipedia.org/wiki/Typography">Segons la Viquipèdia</a>, la tipografia és &#8220;l&#8217;art i la tècnica d&#8217;organitzar tipus per fer que el llenguatge escrit sigui llegible, llegible i atractiu quan es mostra&#8221;. Cobreix àrees com l&#8217;elecció de tipus de lletra, la combinació, l&#8217;elecció del ritme vertical adequat, el control de la longitud de les línies, l&#8217;espaiat de lletres, entre d&#8217;altres. Com podeu veure, és un tema molt ampli. En qualsevol cas, m&#8217;agradaria fer servir aquesta publicació com una guia bàsica per a alguns conceptes relacionats amb la tipografia. Començaré parlant de la diferència entre tipus o famílies tipogràfiques i fonts.</p>



<p>Comencem pel principi: les fonts no són fonts! El que normalment anomenem “font”, en realitat és un tipus (<em>typeface</em> en anglès). Però, què és un paio? Un tipus és un conjunt de caràcters (lletres, números, símbols de puntuació, etc.) que tenen un estil uniforme. Un tipus està compost per una o diverses fonts, que són variacions del mateix tipus. Aquestes variacions poden ser en termes de:</p>



<ul class="wp-block-list">
<li>Mida</li>



<li>Pes o gruix (un <strong>text en negreta</strong> té més pes que un sense)</li>



<li>Inclinació (la <em>cursiva</em>, també anomenada itàlica, és una variació, y també ho és la <strong><em>cursiva en negreta</em></strong>)</li>



<li>Ample (el mateix tipus pot tenir variacions en termes d&#8217;amplada dels caràcters o glifs, cosa que porta a les anomenades fonts condensades). La tipografia Univers n&#8217;és un exemple. Pots veure&#8217;n <a href="https://font.download/font/univers" target="_blank" rel="noreferrer noopener">una mostra a font.download</a> (desplaça&#8217;t cap avall fins a Variants).</li>
</ul>



<p>Per la resta d&#8217;aquest article, em centraré en el pes (gruix) i la inclinació.</p>



<h2 class="wp-block-heading">Comencem parlant del pes&#8230;</h2>



<p>Farem un cop d&#8217;ull a una evolució del tipus que estic utilitzant pels tipus d&#8217;aquesta web, Source Serif 4. <a href="https://fonts.google.com/specimen/Source+Serif+4" target="_blank" rel="noreferrer noopener">Es troba disponible a Google Fonts</a>.</p>



<figure class="wp-block-image aligncenter size-full"><img fetchpriority="high" decoding="async" width="1794" height="552" src="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight.webp" alt="" class="wp-image-4909" srcset="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight.webp 1794w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight-300x92.webp 300w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight-1024x315.webp 1024w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight-768x236.webp 768w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight-1536x473.webp 1536w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-weight-512x158.webp 512w" sizes="(max-width: 1794px) 100vw, 1794px" /></figure>



<p>La captura de pantalla mostra algunes variacions de Source Serif 4 en termes del pes o gruix. De dalt a baix, els gruixos són 200 (ExtraLight), 400 (Regular) i 800 (ExtraBold). N&#8217;hi ha més de disponibles. Per tant, com podeu veure, un tipus pot tenir diversos gruixos, no només dos (negreta i rodona o romana &#8211; així es diu quan no està en negreta) com estem acostumats a veure en els editors de text.</p>



<h2 class="wp-block-heading">… i ara mirem la inclinació</h2>



<p>A la imatge inferior podem veure dos exemples, amb el mateix pes, però amb diferent inclinació. El de dalt és en lletra normal o romana, i el de baix en cursiva.</p>



<figure class="wp-block-image aligncenter size-full"><img decoding="async" width="1798" height="348" src="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope.webp" alt="" class="wp-image-4912" srcset="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope.webp 1798w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope-300x58.webp 300w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope-1024x198.webp 1024w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope-768x149.webp 768w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope-1536x297.webp 1536w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/source-serif-different-slope-512x99.webp 512w" sizes="(max-width: 1798px) 100vw, 1798px" /></figure>



<p>Fixeu-vos que els glifs en cursiva són en realitat diferents dels normals o no cursius (la lletra <em>a</em> és força diferent). Per això és important triar un tipus que inclogui cursives, si es volen utilitzar al text. Els navegadors web poden simular cursives si no estan incloses al tipus (en aquest cas s&#8217;anomenen cursives obliqües o falses cursives), però els resultats no es veuran tan bé com amb una variació específica per a la cursiva. Veiem-ne un exemple a continuació.</p>



<figure class="wp-block-image aligncenter size-full is-resized"><img decoding="async" width="1378" height="338" src="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique.webp" alt="" class="wp-image-4914" style="width:910px;height:auto" srcset="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique.webp 1378w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique-300x74.webp 300w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique-1024x251.webp 1024w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique-768x188.webp 768w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/normal-italics-oblique-512x126.webp 512w" sizes="(max-width: 1378px) 100vw, 1378px" /><figcaption class="wp-element-caption">Crèdit: <a href="https://en.wikipedia.org/wiki/Oblique_type" target="_blank" rel="noreferrer noopener">Article sobre la obliqua a Wikipedia (en anglès)</a></figcaption></figure>



<p>Donat el mateix tipus de lletra, s&#8217;aprecia clarament la diferència entre l&#8217;estil normal, la cursiva real i la cursiva falsa o obliqua. En el cas d&#8217;aquesta última, simplement s&#8217;han inclinat els glifs de l&#8217;estil normal.</p>



<h2 class="wp-block-heading">Combinem les variacions!</h2>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1916" height="1124" src="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples.webp" alt="" class="wp-image-4916" srcset="https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples.webp 1916w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples-300x176.webp 300w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples-1024x601.webp 1024w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples-768x451.webp 768w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples-1536x901.webp 1536w, https://dandelium.studio/wordpress/wp-content/uploads/2024/05/soource-serif-4-samples-512x300.webp 512w" sizes="(max-width: 1916px) 100vw, 1916px" /></figure>



<p>Aquesta captura de pantalla de <a href="http://fonts.google.com">Goog</a><a href="http://fonts.google.com" target="_blank" rel="noreferrer noopener">le Fonts</a> mostra diverses combinacions de diferents gruixos i inclinacions amb Source Serif 4. Com més gruixos hi hagi disponibles, més combinacions d&#8217;estils es podran utilitzar.</p>



<p>Abans de finalitzar l&#8217;article, m&#8217;agradaria parlar breument sobre els tipus variables. Els tipus variables són un pas endavant quant a flexibilitat, ja que permeten ajustar manualment el seu gruix, inclinació i/o amplada dins d&#8217;un rang determinat. Per tant, en lloc de tenir gruixos fixos com 200 (Extra Fina) o 400 (Regular), és possible utilitzar valors com 203 o 350. El mateix s&#8217;aplica a la inclinació i l&#8217;amplada. Com a resultat, proporcionen més control sobre les seves característiques. No obstant això, no tots els tipus són variables en totes aquestes dimensions. Per exemple, Source Serif 4 només té gruix (o pes) variable.</p>



<p>Si voleu saber-ne més sobre les fonts variables, Elliot Jay Stocks ha escrit <a href="https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts" target="_blank" rel="noreferrer noopener">un article per a Google Fonts</a>, amb diversos exemples.</p>



<p style="font-size:0.8em">Crèdit de la imatge de capçalera: <a href="https://pixabay.com/photos/typeface-typefaces-lead-press-5005091/">Sprinter_Lucio en Pixabay</a>.</p>
<p>The post <a href="https://dandelium.studio/ca/disseny/tipografia/conceptes-de-tipografia-families-tipografiques-vs-fonts/">Conceptes de tipografia: famílies tipogràfiques vs fonts</a> appeared first on <a href="https://dandelium.studio/ca/necessites-una-pagina-web">Dandelium Studio</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://dandelium.studio/ca/disseny/tipografia/conceptes-de-tipografia-families-tipografiques-vs-fonts/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
