Typography
The brand font used is FF Din. For use on the web we use Din Web Pro as this has a more equalised vertical spacing. To increase readability and provide a better brand experience we use Din font for Headings and Arial font for body text.
Recently BCU has introduced a secondary brand font; Times New Roman, to introduce style variation across copy. Times New Roman is not a great font for the web sometimes its hard to read, so we have chosen to use Merriweather font instead - it has similar characteristics, but is much more legible on the screen.
Aa
Din Regular
.primary-font
Aa
Din Medium
.primary-font-medium
Aa
Din Bold
.primary-font-bold
Aa
Arial Regular
Aa
Merriweather Regular
.secondary-font
Aa
Merriweather Bold
.secondary-font
Type Scale
Our default text size is 0.875rem (relative ems) or 14px. Our default line-height is 1.65
We have defined clearly distinguishable heading levels with font-size that we feel creates a type hierarchy that is harmonious and consistent. We based our type hierarchy on a modular scale that makes use of the Golden Ratio (1:1.618) in a bid to make a more meaningful relationship between type sizes on the page.
Example:
alpha beta gamma delta cappa epsilon zeta eta
Larger Type Scales
We also provide a range of larger type scales, these should be used sparingly for 'hero' content and headlines.
Example:
mega giga tera
Alignment classes
Easily realign text to components with text alignment classes.
Example:
Left aligned text.
Center aligned text.
Right aligned text.
Transformation classes
Transform text in components with text capitalization classes.
Example:
Uppercase text
Lowercase text
Capitalised text
Headings
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
A Nice Heading
Body Text
I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.
I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.
I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.
There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
Embracing the fluid & flexible aspect of responsive web design was an easy decision, but I’ve been less sure-footed when it comes to balancing that with setting type on the web
Adjusting Line Height
There are a number of predefined line-height classes to help you space your text.
| .lh-0 | line-height: normal |
| .lh-1 | line-height:1 |
| .lh-1-2 | line-height:1.2 |
| .lh-1-3 | line-height:1.3 |
| .lh-1-4 | line-height:1.4 |
| .lh-1-5 | line-height:1.5 |
| .lh-2 | line-height:2 |
I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.
I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.