If you have ever seen one of those visually unique
About me sections in some translators' profiles and thought that you would like to have one like that yourself except you don't know how to do it, I believe I might help you. In fact, even if you do know, you can probably still learn something new from reading on.
This article discusses the
visual styling (Wiki) that you can use when creating the
About me section of your Proz.com profile but also in some other places, such as custom tabs (more on this later). Appropriate Web reference will be provided, as well as examples to illustrate. Expect to see some really cool things as we go!
Existing webinars and guides by Staff members already give you ideas as to what you should include in terms of content (such as
this article by Lucia Leszinsky or the
Meeting clients at Proz.com webinar), but I'm going to tell how to present it visually. I've been doing this kind of thing for 11 years longer than I've been translating; in fact, I've dabbled with web design since 1998.
If you know me from the forums, you already know better than expecting this to be a short trip, so you'd better make yourself some coffee. Make it strong because this is going include some code, complete with semi-colons, speech marks and all that jazz, but I'll try to make it light. In fact, my goal is to enable you to be efficient without forcing you to go through an entire coding seminar, although this is still likely going to be a demanding lesson.
Introduction
Before we continue, I would like you to take a look at the blog post titled
10 Examples of Beautiful CSS Typography and how they did it... at 3.7 Designs. That's what we'll be talking about. My goal is to give you the tools – and perhaps inspiration – to try and come up with the same things that those great designers are doing.
Let's start from the basics, then. Here is the most important thing to say for now: Web design (and what we are doing here is web design) is 95% typography. And the role of typography is to serve the content. This is because:
Content is king
'Content is king' has been a popular adage among web designers for a while. The saying has various applications, from SEO to graphical design, but it comes down to one overarching fact: your content is actually more important than your presentation. Your presentation is only there to bring the most out of your content.
So where do I start?
As a (copy)writer for the web – which you are effectively becoming – you want to start from your text. Focus on that text. Write with confidence and ability. You will dress it up visually when it's ready on the content side. Some serious professionals in the website world actually put the textual content on their plates first and only when they have it there do they think about how to arrange it visually, how to present it to the reader. Because
your visitor is a reader rather than a spectator. Again, we aren't painting a picture here, we are presenting text. Or:
Taking it further, as a translator – or starting it earlier rather?
As a translator, you can probably take the normal principle even further than quite a lot of others. Of all people
you should find it easy to understand that the text you use also is just another layer of presentation. Textual content? Bah! The real content is the message. The text, the language, is candy wrap.
Think about your message! And the rest will follow, in due order.
At least if you want to do it like a pro. This because:
Details follow composition
Professional painters, who rarely use any text in their visual work, start from the big picture and only then hone the details. Details follow composition, not the other way round. If you can imagine an organisation diagram and go from top down, that's also a good way of visualising it.
Having said all this, it is now time to move on to the technical how to's. Again, first things first – as I'm giving you a rod here, not a fish.
The big picture
Structure
A web document has its structure (additional reading:
the 'DOM' (Wiki)). The structure can be graphical and can serve graphical layout purposes (layout here not being much different from the
DTP layout (Wiki), and if you think we're doing some sort of DTP here, you're spot on), but its primary purpose is the grouping of text (just like with 'real' DTP on paper).
Divide et impera! Rule by dividing your content (and your message) sensibly.
The tags (or what's HTML doing here and what does one put style on)
The tags, a lot of which you are allowed to use in your
About me, are
elements (W3C Wiki) of a HTML document – which the Proz.com page displaying your profile is, and of which your
About me section forms a part. Tags use angle brackets (inequality signs) for wrapping, in order that then cay stay apart from the text which, in turn, is wrapped in them. <Like this.> Or, rather: <tag.>some text</tag> The slashed tag is the closing tag of the pair. Most elements, but not all, have opening tags and closing tags. One of the most common tags is the p tag: <p> (and </p>), in which paragraphs are wrapped. Or the <strong> tag marking bold text. Or <em> for emphasis (formerly <i> for italics).
<div> and <span>
Some of the most generic tags are
divs and spans (Wiki). Plenty of other tags are based on them in a technical sense, meaning that they are – basically – specialised divs or spans, or redefined divs or spans with some additional frills to fulfil a dedicated function. Divs are vertical,
block-level elements (Wiki), which basically means large, rectangular context boxes. Inside, they contain
in-line elements (Wiki), such as
spans (including
strong,
em and similar elements).
The small picture
But what do I need these (i.e. divs and spans) for?
If you don't know what to use, use a
div (for a vertical section of the document, or, figuratively, for a large box of stuff, such as several
p tags) or a
span (for example when you need to
put a different colour (or some other style) on some words in your paragraph).
... But how do I put it on there? (Just tell me already.)
Before the > character of a tag you can add a parameter called
HTML attribute (Wiki). There is a couple of them and some are quite useful (especially the
id and
class attributes), but what we need here is the
style attribute. There are several ways to
add style (W3.org) to an HTML document, but the only one we are going to concerns ourselves with here is the:
Inline style declaration
... Which basically means that information about the style we want to use is added right inside the tag we are using. It will look like this: <span style="font-family:'Georgia';font-size:14px;font-variant:small-caps;color:#336666;">Experienced Navajo-Gujarati translator with a zest for horticulture</span>. The effect is this:
Experienced Navajo-Gujarati translator with a zest for horticulture. This means: Georgia font, fourteen (14) pixels in size, small-capitals version, and the dark green colour used by Proz.com as background in some places.
Easy enough so far?
But what do I do, starting from here?
You could probably already achieve quite a lot by now if you just tried.
Modifying the examples you've seen
I'm pretty sure you could just start having fun right away, replacing 'Georgia' with 'Times New Roman' or 'Courier New' (or 'Comic Sans MS' if you must, but you
must not). Nothing simpler than replacing '14' with '16' or '12', and colours are
RGB hex values (W3C Wiki), which means the hexadecimal version ('hex triplet') of the 0-255 Red Green Blue scale (from left to right, no spaces in between, where 0 is the black minimum and 255 the maximum intensity of a base colour).
Reading up to discover more parameters ('properties' and their 'values') that you can use
You can head to the
W3C Wiki for an easier encyclopaedic format, or – if you are more specification-minded – you can jump straight to the
full property table of the CSS2 specification (the last version of styles that everybody was able to agree on; CSS3 is already widely used, but no universally accepted standard is ready yet). The
entire specification can also be found on W3C's website and is easy and transparent enough to serve as a learning tool for someone a little technically minded – if you feel like exploring.
When playing on your own, remember the QA
(This is basically punctuation, a.k.a. operators.)
The semicolon (;)
Remember to put one after every property and value coupling, including the last one after which you put the closing speech mark. I had to insert a couple of missing ones before I could post this too. To make things easier, I searched for
"> (speech mark and greater sign) to see if there weren't any with a necessary semi-colon missing (yes, this does mean mading through "href" URLs on links, which don't need a semi-colon at the end).
The colon (:)
Remember that values are declared (i.e. you define things) using the colon, not the equals sign like you did inside the HTML tag! It's 'font-size:14px;' – not 'font-size=14px;'. And not 'font-size-12px', either.
The hyphen (-)
Hyphens are found in the name some paramaters ('properties'), such as 'font-size' or 'font-variant' (or 'text-transform' or 'text-decoration' etc.) up to the most hyphen-laden constructs like 'border-top-right-radius'. This is similar to how compound nouns are formed in English, so I trust it requires no further explanation. Just remember it takes a hyphen, not a space or colon.
And no nested quotations of the same priority!
Use double speech marks (") to introduce the
style attribute. Use single speech marks (') whenever you need speech marks inside the style definition, such as to provide a font name.
Spelling, and the exact words used
Often, when something isn't working but you did your punctuation right, it's the spelling. Some of those 'properties' (parameters) and their values can be difficult to spell. For example, I've seen a lot of 'bakcgrounds' in my code. Sometimes it takes long to fish out something like that, so be careful. Also, since those names are so intuitive and similar to normal English, in some cases it's easy to use the wrong word, e.g. 'transformation' instead of 'transform' or 'repetition' instead of 'repeat'.
No space between numbers and unit types
It needs to be '12px' and not '12 px'. Simple as that.
The decimal point is a dot
... And not a comma.
Commas are separators inside one property
And that's the only thing they're used for. Also, remember that semi-colons separate full properties. for example: 'font-family:Arial, Sans;' but 'font-size:12px;font-weight:bold;'.
Close your HTML tags and your style definitions
Remember to use the closing tags, especially for your
divs and
spans that you used with redefined, custom properties. Close the speech marks on the
style attribute.
Make back-ups of your work as you go
It's really difficult to nail down the single thing you've done wrong sometimes. Check your changes progressively as you implement them, and avoid too large waves of change. Take small steps. Make sure that each step works.
Whatever happens, don't panic
Just go through your punctuation and spelling and consult the property table to see if you've got the right words. If it still doesn't work, then you have a bigger problem that exceeds the scope of this article, such as browser support or occasional specific restrictions or finding yourself on the wrong side of the Document Object Model. Those are all advanced things that you don't need at this stage.
(If something doesn't work, you can always drop me a line.)
So are we finished here?
No, we are not yet. That is, if you want to, we can end here, but in case you don't feel comfortable with the property table yet or just don't have the time or zeal for wading through it, here is some basic typography for you:
Fonts – in detail
font-family
This defines the font you are going to use. Examples include 'Arial', 'Times New Roman', 'Palatino Linotype', Sans, Serif. Those in speech marks are exact names of specific fonts. Those without are loose font families. Sometimes you want to specify several fonts, separated by commas and arranged by priority, so that if your visitor doesn't have the more preferred font there is still a less preferred one to fall back on. Pro tip: Always use a fall-back font if you find yourself playing with fonts that many people may not have on their systems (just because you have e.g. Carolingia or Tangerine doesn't mean they do); this is because if your visitor doesn't have the font on his system, it will not display. This is usually not the case with Arial, Times, Courier, and rare with some other
'web safe fonts' (the MIT).
font-size
There are two approaches to font size: absolute and relative. The absolute is best illustrated by pixels and the relative by
em (Wiki) or a percentile value. Relative values scale according to the user's settings. They are relative to what the size would normally be (such as percentiles), or relative to some unit that depends on the user's settings (such as the
em). Absolute values give you more control (which is often an illusion, though, as you can end up with 14px headers in a full HD resolution depending on your visitor's configuration), while relative ones provide an elegant, scalable solution that's based on proportion and should look equally well on large and small displays. Pro tip: Pros tend to prefer relative sizes but also frequently ignore that preference. Just make sure you know what you're doing.
font-style and font-variant
Font-style is used to introduce italics (choose 'italic'), and font-variant introduces small caps (choose 'small-caps' and remember the hyphen). Don't use this solely to introduce cursive, though; the
em tag (<em>) exists for that purpose. Small-caps are different from simply typing in uppercase: the 'real' capital letters are still larger, while the 'normal' letters use capital letter shapes in normal letter size, which does not actually look good in some fonts. For this reason and perhaps for some other reasons, small-caps can sometimes look disappointing, so always preview after editing. Pro tip: On the other hand, small caps can add a professional touch in some applications and are typically used for links and headers. In my profile, I use them to distinguish practice areas inside the text.
font-weight
In theory, this has a numerical value from 100 to 900 (every 100), but few fonts in existence really have a full set of so many different weights. Rather, you use this to declare 'bold' or 'normal' (and you only need to declare 'normal' if it's inside something that's normally bold or something that you have specifically made bold, e.g. when you want a non-bold
span inside a bold
div). Also, 'bolder' or 'lighter' take it one notch up or down (respectively) from what it'd normally be.
Shorthand for the lazy (or the frugal)
Shorthands may still not enjoy full and flawless support in browsers and used to be discouraged for this reason, although the situation has been improving. A shorthand font declaration looks like this: "12px bold small-caps italic Georgia". This is supposedly based on some shorthand that was traditionally used by typographers for real print.
More text properties (alignment, decoration, case)
text-align
This aligns your text to the left or right or justifies it, e.g. 'text-align:justify;'.
text-decoration
Historically used to specify 'none' or links to avoid their usual underlining, it can also be used to underline something that's not a link. You can also use 'overline' or 'line-through'. Pro-tip: Using underline sparingly and judiciously can give you that language teacher tone you may sometimes want to use. Line-through is good for representing visible deletions, such as the
del tag (W3C Wiki), another cool move, e.g. when you want to fake a slip of the tongue.
text-indent
Indentation, 'nuff said. Give it in pixels or in ems or in anything else that's allowed, to have that old-style first line.
text-transform
This is here and not in 'font' because it doesn't do anything to the font you use. It simply replaces small letters with capital letters or the other way round. Thus, 'text-transform:uppercase;' has the same effect as simply typing in capital letters, unlike 'font-variant:small-caps;', which is more complicated than this. The usefulness of 'text-transform' is purely situational, for example if you really have a lot of text, it may be more practical to use this property to change back and forth between uppercase and lowercase easily, as opposed to retyping the text (or pasting it into a text editor and back after changing letter case).
Spacings
Some of the parameters you can find discussed below are among the most powerful tools used by web designers in producing professional typography on the Internet. This is especially true about leading and letter spacing. Let's face it,
Government Relations look better than 'Government Relations'.
line-height (leading)
Line-height corresponds to the traditional typographical property known as
leading, after the lead bar one would use to introduce distance between font
baselines. A baseline is the line the letters figuratively sit on (and only descenders, such as in 'g' or 'y' fall below like their name suggests). Pro tip: Some pros really like a 'fixed baseline' that applies to the entire document, regardless of the font sizes used in different places. This means that the same leading (line-height) is used even when individual font sizes in various places of the document vary. We can impose such a baseline by wrapping our entire
About me in a
div and declaring
style="line-height:Xx", where X is the numerical size and x is the unit (e.g. em or px), and unitless means 'times this' (e.g. 1.5 is the equivalent of 150%). You normally want to make sure that your leading is not too small for your font size! Or else there will be very little distance between your upper and lower lines of text, or even the lines of text may overlap. Some designers employ that overlapping on purpose in limited situations, such as artistic headers. Otherwise avoid.
vertical-align
This is similar to a vertical version of "text-align". Vertical alignment is mostly useful when you deal with pictures or other non-text elements that may need adjustment to look good and avoid upsetting your text flow. Values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, as well as percentiles, all to help you put the bottom of the thing precisely wherever you need it. For text, subscript and superscript come to mind. Pro tip: If you really want to, you can use this to produce a w
av
e effect on your text, or something like that. You will need to wrap individual letters in spans, though, so it's going to be a tiring exercise. Just remember you don't need to create spans to put letters in their default, normal positions, which saves you some hassle.
letter-spacing
Letter-spacing
increases or
decreases the default spacing between letters. Use positive values to decrease and negative values to decrease the spacing. Pro tip: This is a feature used by academic and other high-nosed publishers that shun the use of bold or italics for emphasis. If you are an academic translator, this will be instantly recognisable at least to your older readers. On the other hand, the most frequent use of letter-spacing on the Web is for headers (like I did in my own profile). They look really good there especially if you want to produce a lawyerly or political-science feel (in which case e.g. a steel-blue colour would be in order). On the other hand, negative letter-spacing can be used for example to
give the same old Arial font a new, elegant look (sorta).
word-spacing
Same as letter-spacing, except it's meant for words. I've never used it myself over so many years, but I imagine it could be a good workaround if the default setting looks bad on your font. Or if you want to avoid using separators in horizontal lists, such as navigation bars if you'd actually use one in your
About me.
Okay, enough properties and values for now. We will come back to them in a while to discuss special effects you can put on your text, or simply non-text things you can do with styles, but for now I would like to stop and talk about typography for a moment. I would especially like to give you some practical tips on producing a stylish document online, in this case especially the
About me section of your profile.
This said, if you just hit Google and use 'typography tips' or 'Web typography' or some other intelligent typography-related choice of keywords, you are going to end up with a lot of resourcers that are better than this article, and often written by actual, practicing web designers (not like yours truly, who has consistently remained an amateur since 1998), some of whom may be specialising in typography more seriously than others. I strongly encourage you to learn from those more capable authors if you're at all interested in the subject!
(Pretty much all items of the list below are pro tips.)
- You don't have to use the same font everywhere. In fact, better results are achieved by mixing fonts, except choosing the right mix takes a lot of skill or perhaps talent. This said, the next couple of items on this list will discuss the basics of font mixing for your use. If you want to. You don't have to. I currently don't in my own About me.
- Generally, one wants to group serif fonts with non-serif fonts. This is basically a principle of contrast.
- Out of a serif and non-serif contrasting font pair, the serif font is typically used for headers, while the non-serif for normal text. This is especially true online, where serif fonts are believed to be harder to read than non-serif, the opposite of what's the case in print. However, you can actually use a legible serif font (e.g. Georgia, which was designed specifically to be read on computer screens) for normal text and a non-serif for headers. For example, I use Georgia for text and Verdana for headers on my website.
- Despite the inherent contrast between having serifs and not, those two fonts you choose (i.e. the serif one and the non-serif one) should otherwise be similar enough to mesh well. This is especially true about the x-height (Wiki), which is the corpus size of the font, e.g. the size of the letters 'a' or 'e' or 'w' that have no ascenders (t) or descenders (y). You generally want both fonts to have a similar x-height if the headers sit anywhere near the text, unless you have a specific, particularly decorative goal in mind.
- Too similar is not good, though. Using the serif and non-serif version of the same font, where available, might not be optimal. Same-but-not-really is capable of producing a headache in your subconsciously confused reader.
- While professional designers may use complicated principles to match fonts that you've never heard about, pairings can also be very simple: pairing Georgia with Verdana is already basic enough, but you can even match Times with Arial (usually Times for headers and Arial for text, but you can do it the other way round, too). Don't feel bad about this! Look what the websites of the most respectable papers worldwide use. They can't hope that their readers will have fonts that come bundled with graphical processing software or even standard editions of office software. Worse, they actually need to work cross-platform, so standard Windows or Mac fonts are not ideal. Consequently, they end up with very simple font mixes. Basically down to Times and Arial sometimes (although The Times uses Georgia, actually).
- Just like you mind the purpose of your words as a translator, you should mind the purpose of your font when you play around with the visual side of documents. You probably want to pursue legibility, all the more so if you use smaller font sizes. Verdana is good for small electronic displays, as it has a large x-height. Pro tip: you can use line-height to solve some of your x-height problems. You don't have to (and I don't think I ever have), but you can.
- Large x-height is particularly good for small-caps (try Verdana).
- Don't be afraid to use UPPERCASE, especially for headers. You certainly don't want to produce the impression of typing with your Caps Lock on, but I personally find a little uppercase here or there to be the one professional touch missing from a document that otherwise has a nice classic look to it. Note that newspapers, book publishers, law firms and other such institutions know how to use uppercase. Unless it doesn't fit your vision, you may want to consider using small uppercase headlines instead of simply increasing the font size.
- If you really know what you're doing, you can use uppercase text with a sentence case or title case header. But you'd really better be able to trust your aesthetic sense if you do.
- A rich and varied typography with uppercase, italics and bold neighbouring each other and following intuitively acceptable proportions, can look really professional. Think respectable newspaper.
- Centred alignment ("text-align:center;") is not always bad! It's good for headers and quotations sometimes.
- Uppercase and small-caps combine well with two things: 1) increased letter-spacing and 2) a respectable or otherwise well chosen colour. Such colour tends to be a version of blue, often a cold blend with grey or green, or a diluted bright or medium shade (for example a milky kind of blue).
- Serif fonts are almost inherently associated with lawyers, political science or religion. Again, this impression can be augmented by increasing letter-spacing and choosing the right colour. This also implies conservatism.
- ... On the other hand, if you want to avoid an impression of conservatism, you can, for example, specifically avoid serif fonts and use a non-serif font even though you offer services relating to the law, politics, academics or religion. You can still keep serif headers to keep a bare minimum of the visual associations you want to preserve.
- In the odd case you end up writing in a bright colour on a dark background, you want a smaller font-weight than normal. This is because the contrast will be larger than normal already. You want thinner writing then. You should normally not write bright on dark, especially not for your Proz.com About me field, but just in case you do. (Well, you could sometimes reproduce a logo with styles instead of using an image. Or you could alternate text and background colours chessboard-style. Just make sure the contrast is neither too much nor too little.)
And now a couple of advanced tips on colours
- A list of colours with names can be found at W3 Schools. (Names can be used instead of the #ffffff type of code but are less safe for more sophisticated colours.)
- Professional designers often avoid using pure black, especially on their stylish designer blogs. In numerical terms, this means they don't use #000000. They can use #060606 or even #444444 by default. Reducing the blackness of the black leads to a decreased contrast. Decreased contrast, however, does not uniformly translate to less eye fatigue. Too much is not good, but too little isn't good, either.
- Similarly, often a less intense off-white will be used instead of the default white background. Actually, the default background of your About me is not a pure white, it's #f9f8f2 (R 248, G 247, B 241 – a small distance from 255 255 255), which better matches Proz.com's khaki sniper style.
- American lawyers use red a lot, and they also use a lot of blue (actually, these are maroon and navy, darker shades). Just like the Republicans Party. And the Democratic Party. See? Basically, lawyers and politicians and a bunch of other conservative types use reds and blues a lot. In some cases, this has to do with the colours of the flags of English-speaking countries.
- This said, using non-standard, unique tints and shades is popular. Sometimes they're so light that the red and blue are basically only pencilled in, suggested merely.
- Browns and greens are solid, down to earth colours. They're used by banks, armies (here possibly for slightly different reasons but anyway), and some lawyers. Actually, despite my legal background, my own website is in browns (unlike my Proz.com profile with a lot of blue and some red).
- Blue is used in all sorts of applications by all sorts of entities. Lawyers use plenty of blue, and Facebook is all blue. Also, a lot of logos used by companies are blue. The various shades of blue supposedly carry different meanings, like darker for a more elitist impression and lighter to imply affordability. I actually disagree, there is plenty enough posh use of lighter blues to invalidate that kind of claim. At any rate, blue does tend to be associated with nobility, and sometimes with the 'blue' mood.
- Red is an in-your-face colour, the 'alpha' colour, basically. It has seen plenty of use in heraldry, especially in some countries. It can be associated with strength, life (in a different sense than green), activity, virility. The Red Baron (Wiki) had his aircraft painted red, presumably to taunt the opposing fliers or avoid any impression of stealth.
- Orange is like red but not in-your-face as much, even though it can be brighter. Bright orange can be associated with energy and action. Sometimes with a good bargain and savings (the affordable colour, apart from the Windows XP kind of blue). It can be used in calls to action (Boagworld) instead of red.
- White is your good old mellow background. It can also by stylish and even luxurious, especially if you use a lot of whitespace, just like those ads that pay for an entire page but only use a fraction of it in the middle or space their sparse content apart. Whitespace is often better for layout than the use of bold font or otherwise varying your typography. Don't be afraid to experiment with large swaths of white. Fewer words and spaced apart can make a better impression than a clutter of text that fills the entire space available.
- Black can be depressing, but it can also be stylish when used in moderation. It is sometimes used as the background colour in presentations of luxurious products (including websites). Unless you're an artsy type or translate marketing texts for a specific bracket of customers, I would avoid excessive use of black backgrounds.
- Silver and gold are typically associated with royalty, nobility and so on, except when it's more like steel. However, since colours aren't displayed in the same way across all display devices, metallic colours can be lost in some cases, even reduced to shades that actually look bad.
- As you can see, there isn't really rocket science to colours per se. There are some typical implications but no set-in-the-stone meanings. The real science, or art, is matching them. Where you don't have the eye to do it the art way, you can use maths (by applying consistent mathematical operations on the Red, Green and Blue) to do it the science way. Or you can use a tool like Color Schemer, Color Scheme Designer, Color Wizard and more. There are also tools that help you pick colours from pictures and create other colours to match and fill a palette of four or five colours for you. You don't normally need more. Above all, do match your colours.
Inspiration
One more thing about colours, actually. It can be tough to come up with a good set, and sometimes experimenting with online tools won't be enough to discover what you want to do when you don't have at least a single starting colour you particularly care about.
If you don't know where to look for inspiration, I would to professionally designed materials. Not necessarily the websites that artsy designers create for themselves (those can be made gaudy and ill-matched on purpose), but rather the fruits of their work, especially when they work for conservative or aesthetically sensitive companies and institutions. I have looked particularly at beautiful metal tea boxes, tobacco sachet, high-priced chocolate praline wraps. And that was some really good stuff. The current colour palette on my website loosely resembles Japanese paintings of old, while my Proz.com
About me is vaguely similar to something a small chocolate bar came in (attached with a tin of designer coffee).
Also, there are so many websites these days, that you can literally google for stuff like 'beautiful brown pages' and be given entire lists of them, pretty much because someone has already thought about it and run a beauty pageant for websites of your favourite colour or other variety. Plus, go for contests, lists of design awards, and portfolios of successful designers. In which case you're probably looking for more than just colours (e.g. layouts, menus, special effects etc., most of which you don't need for a simple
About me!).
(Alternatively, just follow the default Proz.com colour scheme. To extract the colours, take a screenshot and use the colour probe tool.)
Do I have to stand out? Should I?
(Arial with negative letter-spacing, in case you want to know.)
Having said all of the above, I would also like to stress one thing: Don't overdo it. You should not be changing standard parameters if you don't know what you're doing. Standard parameters were designed for standard situations, presumably by people who have seen a lot of situations and learnt how to react to them. A font author would normally know much more about these things than you or I. Plus, always think if you
really need to stand out. Marketing – and we're basically prepping up your copy visually here – is often about blending in instead.
So here I have a target-specific question for you: do you want to stand out or do you want, rather, to blend in with the general style of Proz.com? There is no single answer to this question that works for everybody. But, just as some people jump at the opportunity to be different, others have more or less consciously emulated the general style of Proz.com.
Alternative solution: Blending in with Proz.com. Looking like a feature.
If you prefer to look more like a Proz.com feature, it's not that hard: Take a screenshot, open it in any graphical editor, select the colour probe tool and you can pick the exact same RGB values Proz.com uses in its own layout – essentially the whole khaki-olive-green-off-white setup with the characteristic red font in places. Alternatively, you can use complementing or contrasting colours or perform whatever operations you can think about to produce a stylish similarity or stylish contrast.
Incidentially, remember that you're probably going to blend in the most by not specifically defining anything – this means without providing your own custom definitions. That makes it pure HTML with very little CSS for you.
I will write a separate article on this later.
Some other-than-text properties
There are some style properties that don't serve text directly. I will discuss the most relevant ones now. First, backgrounds.
background-color
Background-colour changes the colour of the background of your text. This is typically used with tables or page sections. Colours work just the same as with
color.
background-image
Here's the way to do it:
style="background-image: url('picture.jpg');", for example
<div style="background-image: url('picture.jpg');">your whole About me
here</div>. Word of warning, though, you
really don't want to be writing on pictures. This is just in case you have a nice, stylish, non-intrusive background texture that's actually better than a solid colour.
background-repeat
Basically "background-repeat:repeat;" to tile, "background-repeat:no-repeat" to avoid tiling, and "repeat-x" and "repeat-y" for one-axis repetition.
background-position
If you aren't tiling it, you may want to put your background in a specific position. This is how you do it. Values are any combination of left, center or right with top, center or bottom.
Now borders. This is really going to be tedious due to the multitude and complexity of parameters, so consider yourself warned. You want borders when you create boxes. For example, you want a dark box with light text inside to stand out from your default dark-on-light setup. For example an ornate header. I will only discuss this very briefly because if you're really interested, then you should be reading the specification already.
border-style
The default can often be none, but your options here are: dotted (popular among professionals), dashed (another popular one), solid (i.e. default single line), double, and the fake 3D ones: groove, ridge, inset and outset.
border-width
Usually 1px for the typical box border. You want it more than 1px for the 3D borders (as you can't really fake 3D with only one pixel of width).
border-color
The colour of your border. It can contrast with the background-color of your box or it can be mostly similar but still distinct enough to mark a border properly.
right, left, top and bottom
You can insert the direction in between 'border' and whatever it is that you're changing. For example: 'border-top-width', 'border-left-style' and so on. There is no need to list all the possibilities here.
More reading:
margins and
padding to avoid having your borders touch your text – or your other borders.
Special effects (like it's not special enough already!)
border-radius (rounded borders)
Again, this also has 'border-left-radius' and so on. The value is a normal numerical value, e.g. 20px. Doesn't work in some browsers but should be okay in reasonably modern versions of leading software.
RGBA (R, G, B, a) colours
Works just like normal colour values, except the format is a little different: 'background-color: rgba(255, 0, 255, 0.2)', for example, is a fuchsia with 0.2 transparency ('alpha'), so you see some stuff from underneath. This is not universally supported. Pro tip: it does work as a border-color too for semi-transparent borders like you see on some gadgety websites. Another pro tip: Don't use this just to make the colour lighter. Do the maths and declare a lighter colour instead (such as border-color:#444444 for a black box). Only use RGBA when you want some text or image from below to be partially visible.
box-shadow
Box-shadow is only available as a shorthand, and 'short' still means more like a blazoning exercise rather. Here, I used "box-shadow: 5px 5px 5px 5px #ff00ff;", which means horizontal offset of 5 pixels, vertical of 10, blur distance of 5 and spread distance of 10. The colour is fuchsia. Yes, you can use RGBA colours here. You can also stack multiple shadows, separated by commas. Also, you can add 'inset' after the colour code (but obviously before the semi-colon!) to change the type of shadow dramatically. Large blur distances and spread distances can produce a blurry anti-aliasing-like effect. You can combine them with RGBA for more special FX goodness. Not all browsers support shadows. In fact, there is a chance your browser does not – if you don't see a fuchsia shadow right here around this text box. So, don't rely on shadows for anything critical (especially inset shadows that require you to adjust your basic colours).
If you want more special effects (and I'm sure there are more), just google them up. There's a good chance you'll be led to the
50 examples Smashing Magazines has gathered up and explained. Adobe has some nice
filters and transition effects. While some special effects are pretty simple to figure out, I wouldn't expect to be able to use most of them without doing some serious homework first, though.
Non-special but useful: width, height and float (and clear)
width
It's simple like "width=200px;". Don't be overenthusiastic, though. You still need to keep in mind what I said about absolute and relative sizes. Absolute sizes will look bad on large screens. Relative sizes can look bad on small screens. Pro tip: play with
min-width and max-width, the names of which are self-explanatory – you could use them to define threshold values (e.g. minimum or maximum pixel sizes if you used a relative, percentile width), if they actually worked in all browsers, which they don't.
height
It's just like width, except the makers of CSS and the makers of browsers have in their wisdom decided to make it more difficult, and in some cases it won't work just because it won't, for example because it's not supposed to work with that particular type of element and that's it. Particularly problematic is height specified for elements that contain 'floating' elements (i.e. elements for which you've defined the
float property), containers (
divs,
p's etc.) without content in them, generally, there used to be problems with
divs, and, last but not least, the value of "100%" has consistently remained an epic fail since ice age. Don't expect 100% to work they way you'd expect it to.
float
You just put "float:left;" or "float:right;" there in the style line. This floats the box (e.g. a
div to top left. This is basically a floating type of box alignment. Pro tip: if you list three floating boxes in a row, the
last will become the first (as in, pushing ahead of the already displayed ones as the page continues loading). Also, floating elements will generally bounce off the margins (which you can override, but the default setting is that there's gonna be some breathing space). Note: floats are not actually simple like this, as in reality they are governed by a set of arcane rules, but in practice, in simple applications you get away with not knowing more.
clear
In simple language, "clear:both;" (although "clear:left;" and "clear:right;" also exist) is used on a new element that's supposed to be comfortably below all the madness you created by stacking floats one after another before. If you need to know more, you need to read the complicated equations in the specification. (Thank you very much, I prefer to learn hands-on by just seeing what happens when I change it.)
Dude, why are you tormenting me with this stuff?
Because widths and floats are popular grouping elements (boxes for your text, links, images and other content, essentially) that help you achieve the layout you desire (until it falls apart, especially when viewed on a phone or in an old browser). This is one of the major applications of styles in web design. There's an overwhelming chance you don't need this for your
About me, so don't worry. If you learn this, though, it should help you with a real website or blog or something like that.
Image use
Images are not really CSS (which is to say they are not a subject under the head of styles), even though you will usually need to use styles to put them in the right position, especially through vertical-align (if you ever try to use small images of national flags as links to language versions, then you will know what I'm talking about). At any rate, your images should reflect you, they should connect with your audience, and in other ways they need to be just like the rest of your material, viz.: stylish, snappy and connecting well. Remember that images come in fixed sizes, though, which has the potential to wreck your layout or at least make it look seriously bad in some screen resolutions (think small like mobile phones and tablets or large like those 10K-pixel setups some technocrats have). Match the colours, don't go over the top, be realistic about your skills and respect copyrights. Personally, I've decided not to use pictures in my profile.
Recap – examples
Here are some examples of how you can use styles in practice:
Code: <span style="color:#ff0000;">Subtitling</span>
Effect: A red mention of a
type of service you offer.
Code: <span style="color:#6495ed;letter-spacing:0.2em;font-family:Palatino,Georgia;">Court Interpreting</span>
Effect: A more
lawyer-style way of doing the same, with widely spaced apart blue letters in an appropriate serif font. The name of the colour is CornflowerBlue (and you can use this name instead of the hash and hex number, actually, i.e. "color=CornflowerBlue", except perhaps it can be less safe than a number in some browsers. The default font is something from the broad Palatino group (a very lawyerly font, my CV is typed in it), followed by Georgia as a fall-back solution (which I use on my website) in case the user doesn't have anything belonging to Palatino.
Code: <div style="color:#202020;background-color:#f0f0f0;line-height:1.5%;">Off-black text</div>
Effect: A less than pure black shade to write in. Cast on a light grey background. With 1.5 times the normal spacing between the verses.
Code: <span style="text-decoration:line-through;">Peanuts</span> Rates
Effect: A pun using visible deletion.
Unlike this.
Code: <div style="border-style:solid;border-width:8px;border-color:rgba(255,0,0,0.2);border-radius:20px;">Rounded box with text</div>
Effect: A text box with wide rounded red borders that are partially transparent. A more conservative solution would use 1px width and black for colour to take advantage solely of the rounded corners. By the way, it really is normal red, it just has 0.2 alpha set on it. Like I said above, you know the difference between this and just using an ordinary non-transparent but less intense colour if we have a texture or text or anything else in particular underneath. Depending on your browser and its settings, you may be able to see how the border runs over some letters on the left side of the top and bottom rows of this box, but the letters are still visible.
Code: <div style="background-image: url('texture.jpg');background-repeat:repeat;">Textured box</div>
Effect: A box that has a background texture. (Sorry, no example.)
Code: <span style="color:#ff00ff;letter-spacing:-0.1px;font-family:Arial;font-variant:small-caps;">Artistic clutter</span>
Effect:
Tightly squeezed funchsia text in small caps.
Code: <p style="border-style:solid;border-width:0px 1px 0px 1px;border-color:black;">Text goes here</p>
Effect: A paragraph that's flanked with partial borders. Pro tip: I used shorthand here to avoid typing so much. Four values mean: top, right, bottom, left in this order. Two mean top+bottom, left+right. Only one means all borders. Thus, you could use '0px 1px' to the same effect here. Blogs often mark quotations by using paragraphs (or other containers, e.g. divs) that have a thick sole border on the left (and no right, top or bottom border).
Code: <p><span style="float:left;font-size:200%;">F</span>irst letter</p>
Effect: Nice first letter, a.k.a 'drop cap'. Without the 'float:left;", it would simply be larger than normal. You can use different size proportions, play with margins and padding, and even with vertical-align or use a div instead of a span to see what happens. You can also invert the text and background colours (i.e. negative it) to make it stand out even more.
Code: <div style="float:left;width:49%;">left column</div> <div style="float:right;width:49%;">right column</div>
Effect: Two colums, one on each side. (A float:right column will look the Kudoz Activity/Project view, for example, except Proz.com uses tables rather than floats for it.) This said, if you need to know more about arranging text properly in two or more columns, you should see
this tutorial (maxdesign) or one of the many other tutorials on layouts available on the Web.
Columns are a good way to avoid long lines if you don't like them. Pro tip: you can combine floating with absolute sizes (e.g. '500px') or max-widths or min-widths on those columns, to make it so that they'll line up horizontally if the browser window is wide but collapse and display vertically if the window is narrow. But plan it well and test it well. I'll discuss an easier way immediately below.
<table width="100%" style="border:0;"><tr><td width="50%"></td><td width="50%"></td></tr></table>
| The only real style here is the "border:0;", the purpose of which is to make sure that the table won't have any borders. Otherwise this serves to divide your About me into two columns using a table. Pro tip: This is a very 1998 solution, and it was hip when Proz.com was new. | (Pro tip ct'd) Web designers nowadays frown on the use of tables for layout. But, since Proz.com already uses plenty of tables for its layout, and, consequently, there are plenty of such tables on your profile page, you really don't need to feel bad about throwing in another one. Besides, this is much easier to manage than floated columns, especially if you're new to this type of thing. |
Where else can I put to use all this knowledge you've just forced me to absorb?
Since you've learnt all this already, you may as well put it to use in other places where it works just the same way (or similar). The next-of-kin of your
About me are the custom tabs you can use in your profile. Click
Settings on your profile, then you will see
Custom tabs on your left, under
Other settings. Even without being a paying member you can have one; paid members can have three. I currently use two, one of which is even kinda redundant. Three custom tabs really is a lot of room for personalisation.
Also, you can use this knowledge in creating or especially editing websites (normal websites, blogs and so on). You would need to learn a bit more in order to create a complete website, which we might cover some other day. On the other hand, some blogs allow you to use HTML and possibly styles in your posts (the same goes for Proz.com articles like this one). So here you've just learnt quite a bunch of ways of making that useful.
Finally, you can use styles on whatever HTML tags are allowed in your Proz.com forum posts. For example, I couldn't use the
del tag because it wasn't allowed, so I put
style="text-decoration:line-through" on whatever element it was (possibly even a
strong, which really isn't meant to have styles put on it, but who cares). Styles are the only way you can have small caps in a forum post, for example. Not that I can think of a good reason why you should need them. But colours can be pretty useful, I guess.
Oh, perhaps one more thing. If you had previously been totally green about all this and any other sort of coding, having your new-found familiarity with what we've discussed here should help you understand website localisation (and, indirectly, other localisation that involves source code). Most importantly, you will understand why you shouldn't for example translate 'fuchsia' or 'border-style' or 'background-color' etc.
'Tis all – for now!
And this is all for now, time to wake up all ye snorers! I wish y'all but in nowise guarantee a lot of fun with the hereinabove. Thanks for reading. Do feel free to drop me a line if something isn't working or if you need more explanation.
Poland