{"id":3739,"date":"2010-08-03T11:38:52","date_gmt":"2010-08-03T09:38:52","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=3739"},"modified":"2023-02-27T14:56:21","modified_gmt":"2023-02-27T14:56:21","slug":"dalla-proposta-grafica-al-css-definiamo-il-testo","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/","title":{"rendered":"Dalla proposta grafica al CSS \u2013 Definiamo il testo"},"content":{"rendered":"

\"photoshop_icon\"Padroni degli strumenti di Photoshop visti nel precedente post apriamo il nostro file e visualizziamo le guide e tutti gli elementi di aiuto o chiarimento<\/a> che il designer ci ha lasciato. Se ci sono livelli nascosti vediamo cosa contengono e controlliamo che non ci siano stranezze o incomprensioni da chiarire. Fatto questo iniziamo. Il file PSD originale da cui \u00e8 tratto l’articolo \u00e8 scaricabile attraverso questo link, mentre il materiale completo si trova qui.<\/p>\n

Reset.css<\/h3>\n

Per prima cosa, \u00e8 buona norma resettare gli stili CSS <\/strong>di default definiti dal browser azzerandoli con un CSS di reset. In questo modo eviteremo incongruenze di inizializzazione sui differenti browser. Per resettare il CSS in questo progetto partiamo con un foglio di stile preimpostato<\/a>.<\/p>\n

Alternativamente possiamo crearne uno noi con solo le regole base che pi\u00f9 ci interessano <\/strong>o eventualmente estendere <\/strong>quello gi\u00e0 linkato (ad esempio, per me un reset pu\u00f2 non avere nulla tranne che il margin sui lati del body <\/strong>che per qualche motivo odio… ). Per ulteriori approfondimenti esiste una guida di html.it.<\/p>\n

Abbiamo gi\u00e0 visto che il file in questione contiene una griglia verticale, che se usata con criterio concede un ritmo al posizionamento degli elementi in altezza. Per iniziare con il nostro foglio di stile partiamo da questo dato iniziando a settare il leading (line-height<\/em>) del testo, il corpo del testo (font-size<\/em>) ed il suo font.<\/p>\n

Line-height<\/h3>\n

Definiamo un line-height <\/strong>per il documento che sia compatibile con la griglia disegnata nel PSD. In questo modo (e avendo resettato <\/strong>il CSS) il testo scritto nella pagina pogger\u00e0 sempre con la sua base sulle linee della griglia appena definita. Per testare questo comportamento provare disegnando una griglia in photoshop a inserirla come immagine di sfondo della pagina. Ecco il risultato in un esempio di A List Apart<\/a>.<\/p>\n

Per recuperare il line-height <\/em>del testo principale della pagina dobbiamo misurare l’altezza che intercorre tra una guida verticale e l’altra<\/strong>. Assicuriamoci che le guide siano visualizzate, attiviamo lo strumento di selezione rettangolare (M<\/strong>) e disegnamo un quadrato che parta da una guida e che si concluda sulla guida sottostante.<\/p>\n

\"lineheight\"<\/p>\n

Fatto questo guardiamo nella palette Info <\/em>e cerchiamo il valore dell’altezza della selezione, in questo caso 22px<\/strong> (ce lo segnamo). Per “cancellare<\/em>” la selezione, CTRL+D <\/strong>o Select > Deselect <\/em>o ancora cliccando con lo strumento in qualsiasi punto del PSD senza trascinare.<\/p>\n

Propriet\u00e0 del font<\/h3>\n

\"\"<\/p>\n

Ora vogliamo definire una famiglia di caratteri ed una dimensione base del testo. Se guardiamo al PSD ci sono differenti grandezze ed almeno due famiglie. Come regola di base io prendo la dimensione del paragrafo di testo principale <\/strong>il cui stile verr\u00e0 ripetuto per tutto il documento nei testi di lettura.<\/p>\n

Per recuperare il corpo del testo e la sua famiglia, il lavoro \u00e8 molto pi\u00f9 semplice. Selezioniamo lo strumento testo (T)<\/strong>, clicchiamo sul testo di cui vogliamo prendere le misure ed il testo diverr\u00e0 editabile.<\/p>\n

\"font\"<\/p>\n

Senza toccare altro (altrimenti scriviamo nell’area di testo) cerchiamo la palette dei caratteri <\/em>e prendiamo la dimensione del corpo, e la famiglia del font<\/strong>, nel nostro caso \u00e8 un “Verdana<\/strong>” la cui dimensione \u00e8 14px <\/strong>e guarda caso, il cui leading \u00e8 di 22px<\/strong>, ovvero la stessa misura che abbiamo scelto come leading base dell’intera pagina<\/strong>.<\/p>\n

Ed ora il CSS ed il risultato di esempio:<\/p>\n

[css]<\/p>\n

\/* Qui il file reset.css … *\/<\/p>\n

body {
\n line-height:22px;
\n font-size:14px;
\n font-family: Verdana, Arial, Helvetica, sans-serif;
\n background:url(images\/test22px.gif);
\n}
\nhr {
\n \/** Da aggiungere al reset.css *\/
\n display:none;
\n}
\n[\/css]<\/p>\n

I titoli e font-face<\/h3>\n

Ora che abbiamo definito le caratteristiche principali dei testi, diamo uno sguardo ai titoli. Sempre utilizzando la stessa tecnica vista precedentemente <\/strong>recuperiamo le informazioni riguardanti i titoli delle sezioni, i tag H2<\/strong>. In questo caso il font ha dimensione 45px<\/strong>, e la famiglia \u00e8 un font che si chiama Harabara. Essendo un font particolare, sicuramente non installato sul computer del nostro utente dobbiamo premunirci di forniglielo<\/strong>.<\/p>\n

[css]
\n@font-face {
\n font-family: ‘Harabara’;
\n src: url(‘harabara-webfont.eot’);
\n src: local(‘\u263a’),
\n url(‘harabara-webfont.woff’) format(‘woff’),
\n url(‘harabara-webfont.ttf’) format(‘truetype’),
\n url(‘harabara-webfont.svg#webfontfAQJ7rnG’) format(‘svg’);
\n font-weight: bold;
\n font-style: normal;
\n}
\n[\/css]<\/p>\n

Dopodich\u00e8<\/p>\n

[css]
\nh2 {
\n font-family: Harabara;
\n font-size:45px;
\n}
\n[\/css]<\/p>\n

Colore del testo<\/h3>\n

Ci sono un paio di cose di cui non abbiamo ancora tenuto conto. Se con il testo selezionato ritorniamo nella palette di definizione del carattere, osserviamo che il colore per il testo non \u00e8 nero come nell’HTML.<\/p>\n

Per recuperare il colore clicchiamo con il mouse sul riquadro del colore <\/strong>nella palette, si aprir\u00e0 una finestra con il valore dei colori nei vari formati. Quello che ci interessa si trova nella prima colonna in basso<\/strong>. E’ il valore esadecimale<\/strong><\/a>, che \u00e8 il formato a mio parere preferibile per l’inserimento nel CSS. Copiamo il valore, #444444 <\/strong>e aggiungiamo una regola color <\/em>all’H2 visto sopra.<\/p>\n

Avremmo potuto inserire come alternativa rgb(48,48,48) <\/strong>sempre prendendo i tre valori dalla finestra di selezione di Photoshop (il risultato \u00e8 identico, ma \u00e8 pi\u00f9 veloce il copia incolla nel primo caso).<\/p>\n

Letter-spacing<\/h3>\n

Oltre al colore un secondo valore \u00e8 stato modificato dal designer, si tratta del valore di kerning \/tracking ovvero la spaziatura delle lettere (letter-spacing<\/em>). Per definire il letter-spacing <\/em>dobbiamo fare una conversione di valori. Photoshop utilizza come unit\u00e0 di misura <\/a>per il valore di tracking 1\/1000<\/strong> di em. L’em <\/a>\u00e8 un’unit\u00e0 di misura variabile<\/a> che si riferisce alla larghezza del carattere utilizzato.<\/p>\n

Se il font-size \u00e8 12px<\/strong> ad esempio, 1em == 12px<\/strong>. Nel nostro caso, il valore del corpo del carattere per il titolo \u00e8 di 44px <\/strong>perci\u00f2 1em == 44px<\/strong>. Di conseguenza\u00a0 per convertire il letter-spacing <\/em>dal valore di Photoshop a quello che dovremo usare noi dobbiamo calcolare:<\/p>\n

30 <\/strong>(valore in PS) * 1\/1000 em <\/strong>(unit\u00e0 di misura) * 44 px <\/strong>(altezza del font) = 1.32 px<\/strong><\/p>\n

Quindi per terminare il CSS, qui, visibile in completezza nell’esempio:<\/p>\n

[css]
\nh2 {
\n font-family: Harabara;
\n font-size:45px;
\n color:#444;
\n \/*oppure rgb(48,48,48) *\/
\n letter-spacing:1.32px
\n}
\n[\/css]<\/p>\n

La prossima mossa<\/h3>\n

Oggi abbiamo visto come leggere ed impostare conseguentemente i valori del testo da Photoshop al nostro foglio di stile. Compresi i valori che non corrispondono nei due mondo. Nella prossima puntata della serie <\/a>continueremo nella lunga strada verso la pagina finita.<\/p>\n

\n","protected":false},"excerpt":{"rendered":"

\"photoshop_icon\"Padroni degli strumenti di Photoshop visti nel precedente post apriamo il nostro file e visualizziamo le guide e tutti gli elementi di aiuto o chiarimento<\/a> che il designer ci ha lasciato. Se ci sono livelli nascosti vediamo cosa contengono e controlliamo che non ci siano stranezze o incomprensioni da chiarire. Fatto questo iniziamo.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[150,42,151,152,66],"class_list":["post-3739","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-photoshop","tag-grafica-web","tag-mockup","tag-proposta-grafica","tag-web-design"],"yoast_head":"\n\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-08-03T09:38:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:56:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Dalla proposta grafica al CSS \u2013 Definiamo il testo\",\"datePublished\":\"2010-08-03T09:38:52+00:00\",\"dateModified\":\"2023-02-27T14:56:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/\"},\"wordCount\":1058,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"keywords\":[\"Adobe Photoshop\",\"grafica web\",\"mockup\",\"proposta grafica\",\"web design\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/\",\"name\":\"\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"datePublished\":\"2010-08-03T09:38:52+00:00\",\"dateModified\":\"2023-02-27T14:56:21+00:00\",\"description\":\"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/07\\\/photoshop_icon.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/dalla-proposta-grafica-al-css-definiamo-il-testo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dalla proposta grafica al CSS \u2013 Definiamo il testo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","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:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera","og_description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-08-03T09:38:52+00:00","article_modified_time":"2023-02-27T14:56:21+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Dalla proposta grafica al CSS \u2013 Definiamo il testo","datePublished":"2010-08-03T09:38:52+00:00","dateModified":"2023-02-27T14:56:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/"},"wordCount":1058,"commentCount":1,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","keywords":["Adobe Photoshop","grafica web","mockup","proposta grafica","web design"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/","url":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/","name":"\u2022 Dalla proposta grafica al CSS \u2013 Definiamo il testo - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","datePublished":"2010-08-03T09:38:52+00:00","dateModified":"2023-02-27T14:56:21+00:00","description":"Leggi dal blog: Dalla proposta grafica al CSS \u2013 Definiamo il testo. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/07\/photoshop_icon.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/dalla-proposta-grafica-al-css-definiamo-il-testo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Dalla proposta grafica al CSS \u2013 Definiamo il testo"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/3739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=3739"}],"version-history":[{"count":10,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/3739\/revisions"}],"predecessor-version":[{"id":217874,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/3739\/revisions\/217874"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=3739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=3739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=3739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Per farlo abbiamo bisogno di utilizzare la regola CSS3 “font-face<\/em>“<\/a>. Per la preparazione del font rimando al precedente articolo<\/a> riguardante Font Squirrel<\/a>. Attraverso lo strumento che Font Squirrel ci da a disposizione, generiamo i file necessari. Nel CSS inseriamo, prima di tutte le altre regole (o in un CSS separato):<\/p>\n