Question

i’m having a photoshop template which i want to transform into a website.
i’ve adapted the container widths, font sizes and stuff, but the problem is that the html page won’t look the same as the photoshop template, especially with text justification.
are there some css rules to follow have the web-layout (text flow) look identical to the photoshop template?

Answer 1

Here is a pretty good list for different things you can do to text with css

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_font.asp

---

Custom fonts is a tricky thing but is a factor in text appearance / flow. All i wanna say about that is if you have time or if you really have to.. use them, otherwise standard fonts are the thing to go with.

Websafe fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Font squirrel: http://www.fontsquirrel.com/fontface/generator

Google web fonts: http://code.google.com/intl/fi-FI/apis/webfonts/

---

Also text hyphenation is a factor but kinda falls into the same category as custom fonts.. if you have time or if you really have to.. then go for it. ( jquery plugins for that are out there )

---

If youre working with designer, i would say that you should discuss the custom font part and hyphenation part with the designer ( or possibly the client as well if he has seen the layout proposition or if he has insisted something regarding the text flow. ) and then go for spacing and indents and line heights and suchs or in whatever order suits you.

If its a work thing.. which it might not be.. idk.

---

I also like what Willoller said but heres my version of it:

It is indeed so that its not always written in stone that you would have to replicate everything 100% just like they are given to you in a layout image.

This is due to few things:
At times designer might not think about things regarding text pla pla pla and plaa. I mean generally. Like, they just place the text to showcase that the text comes here without thinking too much about the size or the color or that it has hyphenation or that it has shadow.. or other stuff.

At times designer might not even know that there are some restrictions or things that are more or less harder to make into the internets. ( Custom fonts, Hyphenation, Text-shadow. And maybe something that im forgetting. )

Also, some things just dont look the same in web browsers ( and consistantly in all browsers ) as it might in your layout image for example like Anti-aliasing this is used with text quite normally when you make a layout with photoshop and it makes the text look softer.

Make it your interpretation of the text and dont sweat over small details and bigger details can usually be negotiated.

---

Edit: Also i’d like to point out that its not necessarily a good thing to go all berserk on the text because it was in the design.

Readability is big factor and sometimes designers think about it and sometimes not ( Sometimes they really dont focus on the text at all like i mentioned earlier. )

There are websites where they use super spacy line-heights and / or big letter-spacing and I’m like thank you and bye.

---

Edit2: Previously written around 4am. Had to clean it up a bit.