Exempel på hur text kan se ut med typsnittet Barlow

Typografi

Trollhättans Stads typsnitt, Barlow, präglas av en mänsklig och mjuk framtoning och har god läsbarhet i tryckta och digitala sammanhang.

Kontaktcenter - en väg in

Öppettider

Måndag–fredag: 8:00–16:30

Vad kan kontaktcenter hjälpa mig med?

Ring eller mejla oss

Besök oss

Gärdhemsvägen 9 461 83 Trollhättan

Varianter

Barlow är ett typsnitt som har ett stort bibliotek med olika varianter. Samtliga är inte aktuella att använda i Trollhättans Stads design.

Disponering av text

Läsbarhet är viktigare än konstnärlighet. Utgångsläget vid typografering bygger på att skapa tydlighet och säkerställa leveransen av aktuellt budskap. Se exempel nedan:

Exempel på hur disponering av text kan se ut

Senast granskad 2019-02-18 av KATLOO

Statistical Code

// Siteimprove event
	var eventCategory = "Lyssna på sidan";
	var eventLabel = $('body').css('position') == 'absolute' ? "Close" : "Open";
	var eventAction = $(document).attr('title').replace(" - Trollhättans stad", "");
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});

// Lättläst is clicked
$("#showEasyread").click(function(e){

// Siteimprove event
	var eventCategory = "Lättläst";
	var eventLabel = $('#showEasyread').hasClass('active') ? "Close" : "Open";
	var eventAction = $(document).attr('title').replace(" - Trollhättans stad", "");
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});

// Hitta snabbt is clicked
setTimeout(function() {$(".rek-link").click(function(e){

// Siteimprove event
	var eventCategory = "Hitta snabbt";
	var eventLabel = $(document).attr('title').replace(" - Trollhättans stad", "");
	var eventAction = $(this).text();
	
	_sz.push(['event', eventCategory, eventLabel, eventAction]);
});
}, 2000);

</script>

var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//tracking.visitorsvoice.com/piwik/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '39']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
  
</script>

// Startpage only
if ($("body").hasClass("StartPage")) {
	// Language links on startpage
	var languages_start = '<div style="float: right;position: relative;height: 2em;z-index: 100;background: #f0f0f0;padding: 0.5em;">';
	var img = '<i class="fa-solid fa-angle-right" style="margin-right:5px;"></i>';
	var eng = '<a style="margin:10px;" href="/en/homepage/">' + img + '<span class="show-for-sr">Show the article in  </span> English</a>';
	var fin = '<a style="margin:10px;" href="/fi/startsida/">' + img + '<span class="show-for-sr">Näytä artikkeli  </span> Suomi</a>';
	var swe = '<a style="margin:10px;" href="/startsida/">' + img + '<span class="show-for-sr">Visa artikeln på  </span> Svenska</a>';
	var languages_end = '</div>';
	var path = window.location.pathname;

switch (path) {
		case '/startsida/':
		case '/startsida':
			$('header').append(languages_start + eng + fin + languages_end);
			break;
		case '/fi/startsida/':
		case '/fi/startsida':
			$('header').append(languages_start + eng + swe + languages_end);
			break;
		case '/en/homepage/':
		case '/en/homepage':
			$('header').append(languages_start + swe + fin + languages_end);
			break;
		default:
			break;
	}
	
	// Campaign: Red (den nya) startpage-panels when black
	//$('.startpage-panels .colorBlack').css({"background-color":"#C94846"});
	
	// Campaign: Orange startpage-panels when empty
	$('.startpage-panels .colorEmpty').css({"background-color":"#F8B068"});
		
	//************************
}

</script>

var languageLabel;

switch (userLanguage) {
    case 'sv' :
    case 'sv-SE' :
        languageLabel = "Språk";
        break;
    case 'en' :
    case 'en-US' :
        languageLabel = "Languages";
        break;
    case 'fi' :
        languageLabel = "Kieli";
        break;
    default :
        languageLabel = "Languages";
}

$(".functionLinks ul li.colorLightYellow a strong").text($(".functionLinks ul li.colorLightYellow a strong").text().replace("Languages", languageLabel));

$("#MobileMenu ul li.colorLightYellow a strong").text($("#MobileMenu ul li.colorLightYellow a strong").text().replace("Languages", languageLabel));
</script>

// SearchPage only
if ($("body").hasClass("SearchPage")) {
	//Change background color to search tip
	var beforeTip = '</div></div></div><div class="row"><div class="block textblock full large-12 medium-12 small-12 columns"><div class="row colorLightYellow"><div class="medium-12 columns"><p>'
	var afterTip = '</p></div>'
	var oldtext = $('.searchNumberPresentation').html();
	var newtext = (oldtext.replace('<p>', beforeTip)).replace('</p>', afterTip);
	$('.searchNumberPresentation').html(newtext);
}

</script>

Cookies

Typografi

Kontaktcenter - en väg in

Öppettider

Ring eller mejla oss

Besök oss

Varianter

Disponering av text